什么是 CSS 预处理器
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 基于 Ruby
Sass 和 SCSS 有什么区别?
相同点: Sass 和 SCSS 是同一种东西, 都称之为 Sass.
不同点:
1. 文件扩展名不同, 分别以. Sass 和. SCSS 后缀为扩展名.
2. 书写 Sass 不带有大括号和分号, 依靠严格的缩进方式来控制.
3.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
- CSS
- body {
- color: #666;
- height: 100%;
- }
后面的内容我们使用 SCSS 编写
安装环境
1.Ruby 官网下载安装包安装
下载地址:
http://www.ruby-lang.org/zh_cn/downloads/
Sass 编译
使用 Sass 开发, 并不是直接引入. SCSS 文件, 引入的. CSS 文件, Sass 只不过是作为一个预处理工具, 通过编译生成对应的 CSS 内容.
编译方法:
命令编译
GUI 工具编译
自动化编译
通过命令编译
Sass --watch <要编译的 Sass 文件路径> /style.SCSS : <要输出 CSS 文件路径> /style.CSS
示例
数据类型
数字: 如, 1, 2, 13, 10px;
字符串: 有引号字符串或无引号字符串, 如,"foo", 'bar', baz;
颜色: 如, blue, #04a3f9, rgba(255,0,0,0.5);
布尔型: 如, true, false;
空值: 如, null;
值列表: 用空格或者逗号分开, 如, 1.5em 1em 0 2em , Helvetica, Arial, sans-serif.
Sass 注释
- ,// 这是注释 -- 我不会出现在生成的 CSS 中
- ,/* 这是注释 -- 我会出现在生成的 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
- CSS
- body {
- color: #666;
- }
局部变量和全局变量
全局变量 -- 定义在元素外面的变量
局部变量 -- 定义在元素内部的变量
局部变量只会在局部范围内覆盖全局变量
示例
- SCSS
- $my-color: #666!default; // 全局变量
- body {
- $my-color: #000; // 局部变量
- color: $my-color;
- }
编译出来的 CSS
- CSS
- body {
- 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
- CSS
- p {
- 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;
- }
编译为:
- CSS
- p.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
希望你对 Sass 能有初步认识, 后续我会写一篇关于 compass 的文章
如有错误, 敬请批评指正!
完~~
来源: https://www.cnblogs.com/guangzan/p/10547335.html