摘要：前言很久没有用文章记录自己的学习历程了，主要是因为实在写的不行，相比大牛写的博客，我这只能算是东拼西凑或者说是读书笔记。以前我只使用外部，现在的更加好用，所以在学习过程中记了一些笔记。在后面加一个感叹号，表示这是重要注释。
前言
很久没有用文章记录自己的学习历程了，主要是因为实在写的不行，相比大牛写的博客，我这只能算是东拼西凑或者说是读书笔记。但是今天还是拾起笔来了，虽然没什么干货，但是对自己而言，总结的过程可以加深对零碎知识的了解，将来自己如果忘记某些知识，可以迅速查找并捡起来；如果以后忘了自己的当初的目标，也能回头看看自己曾经做过的努力。
想起总结的另一个原因，就是自己在最近的实习中学到了很多东西，终于把自己看过的零碎知识用起来了。应了那句话，“纸上得来终觉浅，绝知此事要躬行”。当前参与的项目是一个基于React做的单页应用，技术栈采用React+Redux+Webpack，样式部分采用SCSS书写。以前我只使用外部CSS，现在的SCSS更加好用，所以在学习过程中记了一些笔记。SCSS和CSS基本没什么区别，只是增加了一些编程方法，这些方法都很简单，用起来受益匪浅。SASS和SCSS区别不大，所以我在本文仅提及SCSS。
SASS简介
SASS（Sassy CSS）是一种CSS开发工具，提供了CSS的便利写法，通过编译生成最终的CSS文件（补充，SASS的预编译就是针对下述语法的再排版，没有任何额外的处理加工，我以前觉得会将冲突样式覆盖掉什么的，目前看来并没有）。
SASS安装：SASS是用Ruby写的，但是语法上没有联系，仅仅是需要安装Ruby而已，然后在Ruby中安装SASS，在Ruby的命令行中输入以下命令即可：
gem install sass
将SASS编译为CSS很简单：
sass //将SASS转化为CSS并显示在命令行上，
sass //将SASS转换为CSS并保存在fileName.css中。
sass -watch : //监听目标文件，一旦有变动就自动生成编译后的版本。
SASS的编译风格有四种：
nested: 嵌套缩进的CSS代码，是默认值；
expanded:没有缩进的、扩展的CSS代码；
compact: 简洁格式的CSS代码；
compressed: 压缩后的CSS代码，也就是去掉注释和空格。生产环境中，一般采用compressed风格降低代码体积。一个完整的sass转换命令如下：
sass --style compressed test.sass test.css
//--style compressed表示编程风格
SASS简单编程风格
SASS的简单用法包含使用变量、选择器嵌套以及加减乘除运算，复杂用法包括extend实现样式继承、Mixin实现代码块、颜色函数、@import插入外部CSS或SCSS文件、@if/@while/@each/@function实现的函数功能。
1允许使用变量，变量以$开头，定义方式类似于CSS。如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。变量使用场景是那些需要全局复用的值，例如字体样式，定义完之后直接调用有利于保持较大型CSS文件中字体的一致性。
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
一个有意思的特点是变量定义具有类似作用域的特性，嵌套的内部标签能使用外部标签的变量，但是如果不存在嵌套关系或者在外部使用内部定义的变量，会导致错误：
1)不存在嵌套关系不能引用：
2) 外部定义内部可以使用：
3) 内部定义外部不能使用：
如果一个变量想在全局引用，可以通过!global关键字实现这一点：
2允许使用加减乘除，最终结果会在编译后的CSS文件中体现出来：
3 SASS允许选择器嵌套，好处是避免了父级选择器的重复，复杂CSS样式可以借助类似HTML式的嵌套结构表示出来。比如，下面的CSS代码：
div h1 {
color : red;
}
可以写成：
div {
hi {
color:red;
}
}
属性也可以嵌套，比如border-color属性，可以写成：
p {
border: {
color: red;
}
}
注意，border后面必须加上冒号。
在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：
&必须位于复合选择符的起始位置，但是可以加后缀。如果父级不能添加后缀，SASS会抛出错误。
#main {
color: black;
&-sidebar { border: 1px solid; }
}
嵌套式写法对具有命名空间的CSS属性可以进一步简化，例如font-family, font-size, and font-weight可以写成
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
4 SASS共有两种注释风格。标准的CSS注释 / comment / ，会保留到编译后的文件。单行注释 // comment，只保留在SASS源文件中，编译后被省略。在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
SASS高级用法
1 实现继承
SASS允许一个选择器继承另一个选择器，实现继承的关键字和ES6实现class继承的关键字类似是extend，例如希望class2继承class1，在class2的样式声明中加入 @extend .class1即可。
2 实现Mixin
Mixin类似于c语言的宏，也就是可以重用的代码块，使用@mixin命令可以定义一个代码块。使用@include命令调用这个minxin即可。
代码块中可以指定默认参数，调用时可以赋值：
一个更经典的例子是加入浏览器前缀，用法如下：
3 颜色函数生成系列颜色。
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
4 插入文件
@import命令插入外部文件，sass的导入(@import)规则和CSS的有所不同，编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import "reset.css"，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。
使用@import的一个好处是所有外部文件的引入仅需要一个HTTP请求，但是CSS中使用@import命令就会引入多个HTTP请求，就网页优化而言在SASS中使用@import更有优势。
所有的sass导入文件都可以忽略后缀名.scss，但是CSS导入文件不可以省略后缀名。一般来说基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，可写成@import "mixin"。
5 条件语句
使用@if和$else表示判断
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
6 循环语句使用@for、@while和$each语句。
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
7 自定义函数
可以看出循环以及函数的使用类似于JavaScript，只是需要在关键字前加上@字符。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/81622.html
