注册
登录
CSS预处理器语言，通过编程方式生成CSS代码。因为可编程，所以操控灵活性自由度高，方便实现一些直接编写CSS代码较困难的代码。 一、下载及安装方式一：先下载ruby，然后基于ruby安装sass，webstrom绑定监听即可。 方式二：先下载node.js，然后下载gulp/grunt，最后安装SCSS，这个不用webstrom绑定监听。 二、实用语法首先要说一下，SASS和SCSS是一样的，只是SCSS是SASS的3.0引入的语法而已。
scss的嵌套
编译后的css 友情提示：支持“&”父元素选择器嵌套，支持属性嵌套；@at-root3.3.0推出的新功能，跳出嵌套。 2.变量----使用“$”定义 a. SCSS支持变量作用域和字符串中嵌套变量，具体说明看下图：
全部变量使用及字符串变量嵌套 b.变量作用域 局部变量只能在“{}”内部有效，！global可以将局部变量转换成全局变量（sass3.2.0推出功能）；若定义变量为默认值，在其后加上“!default”
变量作用域 3.混合(Mixin) 使用很简单，使用@mixin定义，@include引用。 a.混合的初级应用----定义和调用
混合的初级应用 b.混合的中级应用----变量初始化及赋值
变量初始化及赋值 c.混合的高级应用----无参及多参数
无参数和多参数 4.继承----使用“@extend” 一般继承class，编译以后，css中该class也会出现，如果你不想让公共的class在css中出现，可以使用“%”占位符选择器。
5.函数及运算 这里以颜色函数及@each为例，其他很多函数自己可以去看看官网，不然一篇文根本写不完。 a.将颜色变深变浅，颜色加减等。
颜色变浅变深及颜色加减 b. @each 这个函数很不错，可以让你对多个背景图一次书写完成，但是需要注意的是对应class的名字要取的和“in”后面的数组一致，且顺序不能乱。
6.注释、@import、编译风格 a.注释 /* */css中显示，//css中不显示，/*重要注释!*/压缩不会被删掉。 b. @import 该标签可引入sass、scss、css文件，如果将一个scss另一个又不想立马被编译成css的话，可写成 @import “_mixin.scss“。 c. 4种编译风格 *nested：嵌套缩进的css代码，它是默认值。 *expanded：没有缩进的、扩展的css代码。 *compact：简洁格式的css代码。 *compressed：压缩后的css代码。 命令行： sass --style compressed test.sass test.css |
| 本文出处： http://www.toutiao.com/a6399865123092349186/ |
|
声明：文章版权归原作者所有 部分文章转自互联网 如有侵权请联系
[邮箱地址] 删除
|
