Sass-最成熟稳定的css扩展语言

语法

创建和编译

创建工程

使用sass创建:就是手动创建一个文件夹

使用compass创建:进入项目目录,使用compass create

命令

compass 带参数创建:compass create —bare —sass-dir”sass” —css-dir”css”

编译sass文件

使用sass命令行:sass —watch demo1.scss:demo1.css

监视整个文件夹:sass —watch sass:stylesheets

风格:nested:结尾大括号跟在最后一个样式的后面

expanded: js函数风格

compact:一个选择器一行

compressed: 压缩风格,去掉注释,去掉空格,生产环境下用的格式

使用sass命令行:sass demo1.scss demo1.css

监视sass文件

使用compass编译

因为是使用compass create创建的工程,所以compass知道哪个是sass文件,知道编译到哪个文件去

compass compile 命令编译

compass watch 监视整个文件夹

compass watch —force 强制编译,不管文件有没有变动

输出风格compass watch —force -s compressed: -s表示—output-style

注释

// 单行注释,不会编译到css文件中

/**/ 标准css样式

/!/ 重要注释,使用压缩风格该注释也会在

sass不支持中文注释,要使用中文注释的话,找到路径:C:\Ruby24\lib\ruby\gems\2.4.0\gems\sass-3.4.25\lib\sass然后在engine.rb文件中添加:Encoding.default_external = Encoding.find(‘UTF-8’)

基础语法

变量的定义和使用

变量的导入

部分文件以_开头,不会被编译成css文件

嵌套

层级嵌套

属性嵌套:多值属性

& 引用父选择器

@at-root 跳出嵌套:@at-root .div1 但是不能跳出@media块

@at-root(without: media rule){.div1} 跳出@media块 不添加rule就跳不出@media的外层选择器

@at-root和&结合:.text-info}

继承

有相邻选择器的无法继承,如:.div1 +. di2 {}; 还有包含选择器.div1 div2,如果继承的是a元素,具有:hover效果,那么:hover效果也会被继承,@media无法继承@media之外定义的样式

占位选择符

sass进阶

数据类型

Number类型

String类型

List数组类型

Map对象类型

Color颜色

Boolean布尔

Null空值

变量操作

== != 所有类型都支持

< > = 只支持数字类型

+-* / %

使用各种操作符时,一定要用空格隔开两个变量,在使用+连接时,前面的有‘’后面的没有,结果连在一起是有‘’,第一个没有后面的有,结果是没有‘’。在字符串中做运算使用#{$变量}包裹变量;在除法中,两个都是原生的样式,sass是不会做运算的,只有结合变量才会,如果非要原生做运算,使用()括起来。

@mixin混入

函数

Sass高级

@if 三目运算;@if…@else if…@else

@while

@for

@each

插件库:

normalize 样式标准化:compass-normalize 有很多模块,可以按需引入

html5

base

links

typography

embeds

groups

forms

tables

susy 布局

breakpoint 响应式

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171217G0EHEG00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券