A-A+

sass使用备忘录

2016年06月09日 HTML/CSS 暂无评论

Sass并不能让你写出更好的CSS,但是却可以让你更高效地写出高可维护性的CSS。—— 刘炬光

1.文件后缀名为scss。sass使用$标识变量。如果变量在css规则内定义,则其只能在这个规则内使用。

只要是css属性的标准值存在的地方都可以使用变量。声明变量值的时候变量值也可引用其他变量。

sass中划线和下划线都兼容。

2.sass输出的四种选项:

nested嵌套缩进的(默认);

expanded无缩进,扩展。

compact简洁格式;

compress压缩。(上线时候选择)

nested (2) compact compress expanded

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3.注意事项

属性嵌套的时候注意冒号。

sass属性嵌套

sass属性嵌套

 

 

 

 

 

 

 

&引用父元素:

&父元素

 

 

 

 

 

注释

/*编译后的文件中仍然保留*/

//只存在于sass文件中

/*!

我是重要注释,仍然会被保留

*/

 

字符编译utf-8/中文字符路径/嵌套(选择器、伪类、属性)

sass的导入(@import)规则和CSS的有所不同,编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import 'reset.css',那效果跟普通CSS导入样式文件一样,导入的css文件不会合并到编译后的文件中,而是以@import方式存在。

所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头,如_mixin.scss。(下划线可不写)

sass的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可。

来自:http://www.w3cplus.com/sassguide/syntax.html

 

把项目中“bootstrap.scss”编译出“bootstrap.css”文件,并且将编译出来的文件放在“css”文件夹中:

sass --watch sass/bootstrap.scss:css/bootstrap.css

 

sass 的默认变量一般用来设置默认值,可根据需求来覆盖的,只需要在默认变量之前重新声明下变量即可,默认变量的价值在进行组件化开发的时候会非常有用。

什么时候声明变量?

该值至少重复出现了两次;该值至少可能会被更新一次;该值所有的表现都与变量有关(非巧合)。

Play with this gist on SassMeister.

混合宏不足之处:生成冗余的代码块。 通过 @extend 调用的占位符,编译出来的代码会将相同的代码合并在一起。

混合宏 VS 继承 VS 占位符 适用场景

宏:代码块中涉及到变量、继承:不需要专任何变量参数,而且有一个基类已在文件中存在。占位符:占位符是独立定义,不调用的时候是不会在 CSS 中产生任何代码;继承是首先有一个基类存在,不管调用与不调用,基类的样式都将会出现在编译出来的 CSS 代码中。

混合宏 VS 继承 VS 占位符

混合宏 VS 继承 VS 占位符

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

”/ ”符号被当作除法运算符时有以下几种情况:

• 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。

• 如果数值被圆括号包围。

• 如果数值是另一个数学表达式的一部分。

@for循环

@for $i from <start> through <end>

@for $i from <start> to <end>

:$i 表示变量 ,起始值,结束值。 through 表示包括 end 这个数,而 to 则不包括 end 这个数。

 

unquote( ) 函数只能删除字符串最前和最后的引号(双引号或单引号),而无法删除字符串中间的引号。如果字符没有带引号,返回的将是字符串本身。

Play with this gist on SassMeister.

标签:

给我留言

Copyright © 花未全开月未圆 保留所有权利.   Theme  Ality

用户登录