什么是css预处理器
CSS 预处理器是一个能让你通过预处理器自己的语法生成CSS的工具。预处理器有许多:
1.Sass(SCSS) 2.LESS 3.Stylus 4.Turbine 5.Swithch CSS 6.CSS Cacheer 7.DT CSS ... 这里来学习sass。什么是sass?
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. --sass官网
sass基于rubySass 和 SCSS 有什么区别?
1.Sass 和 SCSS 是同一种东西,都称之为 Sass。
2.文件扩展名不同,分别以.sass和.scss后缀为扩展名。 3.书写 Sass 不带有大括号和分号,依靠严格的缩进方式来控制。 4.SCSS 的语法书写和我们的 CSS 语法书写无差别,直接把.css改成.scss或者.scs改成.scss都没问题。 代码对比sass$my-color: #666 //定义变量$my-heihgt: 100%body color: $my-color height: $my-height
scss$my-color: #666; //定义变量$my-heihgt: 100%;body { color: $my-color; height: $my-height;}
他们编译出来的css
cssbody { color: #666; height: 100%;}
后面的内容我们使用scss编写
安装环境
1.ruby官网下载安装包安装
下载地址: http://www.ruby-lang.org/zh_cn/downloads/sass编译
使用sass开发,并不是直接引入.scss文件,引入的.css文件,Sass 只不过是作为一个预处理工具,通过编译生成对应的css内容。
编译方法: 1.命令编译 2.GUI工具编译 3.自动化编译通过命令编译
sass --watch <要编译的Sass文件路径>
/style.scss
: <要输出CSS文件路径>
/style.css
示例
数据类型
1.数字: 如,1、 2、 13、 10px;
2.字符串:有引号字符串或无引号字符串,如,"foo"、 'bar'、 baz; 3.颜色:如,blue、 #04a3f9、 rgba(255,0,0,0.5); 4.布尔型:如,true、 false; 5.空值:如,null; 6.值列表:用空格或者逗号分开,如,1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。Sass注释
1.// 这是注释--我不会出现在生成的css中
2./* 这是注释--我会出现在生成的css中 */声明变量和调用变量
使用$ 声明变量
普通变量
定义之后在全局范围内有效。
scss$my-color: #666; //定义变量$my-heihgt: 100%;body { color: $my-color; height: $my-height;}
默认变量
sass 的默认变量需要在值后面加上!default
。
scss$my-color: #666!default;body { color: $my-color;}
编译出来的css
cssbody { color: #666;}
局部变量和全局变量
- 全局变量 --定义在元素外面的变量
- 局部变量 --定义在元素内部的变量
- 局部变量只会在局部范围内覆盖全局变量 示例
scss$my-color: #666!default; //全局变量body { $my-color: #000; //局部变量 color: $my-color;}
编译出来的css
cssbody { color: #000;}
sass嵌套
选择器嵌套
Sass允许CSS规则彼此嵌套。然后内部规则仅适用于外部规则的选择器。
scss#main { width: 97%; p, div { font-size: 2em; a { font-weight: bold; } }}
编译出来的css
css#main { width: 97%; }#main p, #main div { font-size: 2em; }#main p a, #main div a { font-weight: bold; }
使用 &引用父选择器
scss#main { color: black; &-sidebar { border: 1px solid; }}
编译出来的css
css#main { color: black; }#main-sidebar { border: 1px solid; }
提示:伪类嵌套,&,你应该懂了吧。
属性嵌套
scss.funky { font: { size: 30em; weight: bold; }}
编译出来的css
css.funky { font-size: 30em; font-weight: bold;}
混合宏(mixin)
mixins定义可以在整个样式表中重复使用的样式。
定义混合宏
通过@mixin来定义一个mixin
通过@include来引用scss@mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000;}.page-title { @include large-text; padding: 4px; margin-top: 10px;}
编译出来的css
css.page-title { font-family: Arial; font-size: 20px; font-weight: bold; color: #ff0000; padding: 4px; margin-top: 10px; }
传递参数
scss@mixin sexy-border($color, $width) { border: { color: $color; width: $width; style: dashed; }}p { @include sexy-border(blue, 1in); }
编译后的css
cssp { border-color: blue; border-width: 1in; border-style: dashed; }
Mixins还可以使用常规变量设置语法为其参数指定默认值。
scss@mixin sexy-border($color:#666, $width) { border: { color: $color; width: $width; style: dashed; }}
有一个特别的参数...
scss@mixin box-shadow($shadows...) { -moz-box-shadow: $shadows; -webkit-box-shadow: $shadows; box-shadow: $shadows;}.shadows { @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);}
编译后的css
css.shadows { -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;}
继承
通过@extend实现继承。
scss.outer { width: 100px; height: 50px; border: 1px solid #000;}.wrap-first { background-color: #f36; @extend .outer;}.wrap1-second { background-color: orange; @extend .outer;}
编译出来的css
css.outer,.wrap-first,.wrap1-second { width: 100px; height: 50px; border: 1px solid #000;}.wrap-first { background-color: #f36;}.wrap1-second { background-color: orange;}
不仅实现了继承,而且非常智能的合并了。
占位符 placeholder
%placeholder是一个极好的功能。他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码,如果不被 @extend 调用的话,不会产生任何代码。
scss %outer { //如果不被@extend继承 不会在编译后产生任意的代码。 margin: 0 auto;}
插值
使用#{}插值语法在选择器和属性名称中使用变量。
scss$name: foo;$attr: border;p.#{$name} { #{$attr}-color: blue;}
编译为:
cssp.foo { border-color: blue; }
运算
加法
直接上例子
scss.outer { width: 20px + 8in;}/* in是英寸。8in即8英寸。 1英寸约=2.54厘米,1英寸大约是96像素 width:20px+8in; 8in=8*96px = 768px 即width=20px + 768px = 788px; */
编译出的css
css.outer { width: 788px;}
如果是不同单位会报错
比如px + em 报错
减法规则相同
乘法
- 如果是不同单位会报错
10px * 2正确 写成10px * 2px报错
除法
- 如果是不同单位会报错
- 10px * 2正确 写成10px * 2px报错
- 但是/运算符css中本来就有,所以要这样写:
scss.outer { width: (200px / 4);}
编译出的css:
css.outer { width: 50px;}
- 如果使用了函数不用()括起来,也被认作除法运算,例如
width: round(1.5)/2
; - 如果使用了加法或减法,也被认作除法运算,例如
width: 5px + 8px/2px;
; 注意还有一种情况: 如果两个值带有相同的单位值时,除法运算之后会得到一个不带单位的数值。在乘法中这么做会报错。
? 变量也是可以运算的
颜色运算
scss.container { color: #112233 + #112233; //编译后的css中的结果是#224466}
字符串运算
- "Hello" + "" + "World!" 结果为 "Hello World"
- "Hello" + "" + World! 结果为 "Hello World"
- Hello + "" + World! 结果为 Hello World
- font + -size 结果为font-size
?希望对你能有一点点帮助,后续我会写一篇关于compass的文章。
如有错误,请批评指正! *** 完~~