简述
这里就不介绍怎么安装sass了，很简单，去官网安装一下就行
→Sass官网
我现在用最简单的一种方式写一个文件来描述函数的使用和方法（scss）
#监听sass的改变
sass --watch style.scss:css/style.css
1、语法格式
语法格式有两种，看个人喜好来写吧
#sass语法格式style.sass
通过 tab 键控制缩进的一种语法规则，而且这种缩进要求非常严格
$def-color: #333
body
font: 100%
color: $def-color
可能有的人不习惯sass这种写法
#scss语法格式style.scss
和正常的css差不多，代码都包裹在一对大括号里，并且末尾结束处都有一个分号
$def-color: #333
body{
font: 100%；
color: $def-color；
}
2、声明变量、引用变量
#声明变量的符号“$”
#变量名称(ps：them-color)
#赋予变量的值(ps：14px/#333)
$them-coklor:#843256;//默认主题色
$btn-primary:$them-coklor !default;//按钮默认色值 ！default则表示默认值
$border-color:#eee;
#变量引用
变量可以引用变量，上面的代码的$btn-primary引用了$them-coklor
#ps：声明变量用的中划线进行分割（也可以用下划线）,中划线和下划线是互通，例子,
#scss
$color-lins:#242639;
body{
color: $color_lins;
}
#编译后的css
body {
color: #242639; }
- 父选择器的标识符&
#scss
div a{
color: #333;
&:hover{
color: red;
}
//如果body的class .ies
body.ies & {
color:#888;
}
}
#编译后的css
div a {
color: #333;
}
div a:hover {
color: red;
}
body.ies div a {
color: #888;
}
- 普通变量和默认变量
普通变量可以全局使用，默认变量则需要加上!default
sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。
#scss
$font-color:#f7f7f7;//普通变量
$font-size:16px;//重新声明变量
$font-size:14px !default;//默认变量
.main{
color: $font-color;
font-size: $font-size;
}
#编译后的css
.main {
color: #f7f7f7;
font-size: 16px; }
- 全局变量和局部变量
#全局变量就是定义在元素外面的变量
#scss
$color:#333 !default;//全局变量
h1{
color: $color;//引用全局变量
a{
$color:red;//重新定义变量，局部变量
span{
color: $color;//引用局部变量
}
}
$color:#999;//重新定义变量，局部变量
span{
color:$color;//引用局部变量
}
}
#编译后的css
h1 {
color: #333;
}
h1 a span {
color: red;
}
h1 span {
color: #999;
}
3、群组选择器的嵌套
#scss
.main{
h1,h2{font-size: 20px;}
a{
color: red;
span{
font-size: 16px;
}
}
}
#编译后的css
.main h1, .main h2 {
font-size: 20px;
}
.main a {
color: red;
}
.main a span {
font-size: 16px;
}
- 嵌套-属性嵌套
类似于font,border,margin,padding
#scss
.main{
border:{
top:1px solid #444;left:1px solid #000;
}
margin: {
top:25px;left:36px;right: 65px;bottom: 23px;
}
padding: {
top: 2px;left: 26px;right: 12px;bottom: 28px;
}
}
#编辑后的css
.main {
border-top: 1px solid #444;
border-left: 1px solid #000;
margin-top: 25px;
margin-left: 36px;
margin-right: 65px;
margin-bottom: 23px;
padding-top: 2px;
padding-left: 26px;
padding-right: 12px;
padding-bottom: 28px; }
- 子组合选择器和同层组合选择器：>、+和~
//选择header下面所有的h1元素
header h1{font-size: 14px;}
//选择header的第一个h1直接子元素
header > h1{font-size: 16px}
+是同层相邻组合选择器
//选择header后紧跟着的p元素
header + p{font-size: 18px;}
同层全体组合选择器~
//选择所有跟在header后的同层header元素
header ~ header{font-size: 20px;}
4、导入Sass文件
如果我现在有一个color.scss的配置文件，需要引入到style.scss
@import "color";
在style里面也可以使用color.scss的变量
#sys-color是color.scss的变量
header h1{font-size: 14px;color: $sys-color}
- 嵌套导入
#color.scss文件内容
h1{
font-size: 14px;
color: #333;
}
#style.scss引入
.container{@import "color"}
#编译后的css
.container h1 {
font-size: 14px;
color: #333;
}
5、混合器的使用
通常网站会有很多重复的代码存在，比如圆角，或者按钮的css,为了避免写重复的代码，所以我们可以选择用混合器
混合器使用@mixin标识符定义
#定义混合器
@mixin borderRadius {
border-radius: 5px;
-webkit-border-radius；5px；
-moz-border-radius:5px;
}
#通过@include来使用这个混合器
h1{
font-size: 28px;color: #333;
@include borderRadius;
}
#编译后的css
h1 {
font-size: 28px;
color: #333;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
- 混合器中的css规则
#scss
@mixin con-art {
margin: 20px;
h1{
font-size: 16px;color: #666;
}
h2{
font-size: 14px;color: #444;
}
}
footer{
font-size: 12px;
font-weight: 500;
@include con-art;
}
#编译后的css
footer {
font-size: 12px;
font-weight: 500;
margin: 20px;
}
footer h1 {
font-size: 16px;
color: #666;
}
footer h2 {
font-size: 14px;
color: #444;
}
- 混合器传参
混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。类似js的function
//定义可传参数混合器
@mixin border-radius($size){
border-radius:$size;
-webkit-border-radius:$size;
-moz-border-radius:$size;
}
h1{
font-size: 28px;color: #333;
@include border-radius(10px);
}
#编译后的css
h1 {
font-size: 28px;
color: #333;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
- 混合器默认参数值
@mixin link-color($def,$hover:$def,$visited:"#365896") {
a{color: $def}
&:hover{color: $hover}
&:visited{color: $visited}
}
h1 a{
@include link-color(red);
}
h2 a{
@include link-color(red,#555);
}
h3 a{
@include link-color(red,#555,#333);
}
#编译后的css
h1 a a {
color: red;
}
h1 a:hover {
color: red;
}
h1 a:visited {
color: "#365896";
}
h2 a a {
color: red;
}
h2 a:hover {
color: #555;
}
h2 a:visited {
color: "#365896";
}
h3 a a {
color: red;
}
h3 a:hover {
color: #555;
}
h3 a:visited {
color: #333;
}
- 复杂的混合器（混合宏-声明混合宏）
#特别的参数“…”,当混合宏传的参数过多之时，可以使用参数来替代
#scss
@mixin prefixer($name,$shadow) {
@if($name=='border-radius'){
border-radius: $shadow;
} @else if($name=='box-shadow'){
box-shadow:$shadow;
}
}
@mixin box-shadow($shadow...) {
@if length($shadow) >= 1 {
@include prefixer(box-shadow, $shadow);
} @else{
$shadow:0 0 4px rgba(0,0,0,.3);
@include prefixer(box-shadow, $shadow);
}
}
p{
font-size: 26px;font-weight: bold;
@include box-shadow(0,0,2,#333);
font-style:normal;
}
p.hp{
font-size: 26px;font-weight: bold;
@include box-shadow();
font-style:normal;
}
#编译后的css
p {
font-size: 26px;
font-weight: bold;
box-shadow: 0, 0, 2, #333;
font-style: normal; }
p.hp {
font-size: 26px;
font-weight: bold;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
font-style: normal; }
- 使用选择器继承来精简CSS
使用sass的时候，最后一个减少重复的主要特性就是选择器继承。基于Nicole Sullivan面向对象的css的理念，选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式，则使用@extend
#scss
.max-error{
font-size: 16px;
color: #999;
}
h1{
@extend .max-error;
font-weight: 500;
}
#编译后的css
.max-error, h1 {
font-size: 16px;
color: #999; }
h1 {
font-weight: 500; }
6、占位符 %placeholder
Sass 额外提供了一种特殊类型的选择器：占位符选择器 (placeholder selector)。与常用的 id与 class 选择器写法相似，只是 #或.替换成了%。必须通过@extend指令调用，当占位符选择器单独使用时（未通过 @extend调用），不会编译到 CSS 文件中。
#scss 声明%变量
%padTop5{
padding-top: 5px;
}
%padBot5{
padding-bottom: 5px;
}
.ulo{
@extend %padTop5;
@extend %padBot5;
}
#编译后的css
.ulo {
padding-top: 5px; }
.ulo {
padding-bottom: 5px; }
缺点就是生成的css里面无法合并
7、SassScript以及运算
在 CSS 属性的基础上 Sass 提供了一些名为 SassScript 的新功能。 SassScript 可作用于任何属性，允许属性使用变量、算数运算等额外功能。通过interpolation（插值），SassScript 甚至可以生成选择器或属性名。
- 数据类型 (Data Types)
Sass 和 JavaScript 语言类似，也具有自己的数据类型，在 Sass 中包含以下几种数据类型：
- 数字: 如，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。
#SassScript 也支持其他 CSS 属性值，比如 Unicode 字符集，或 !important 声明。
#然而Sass 不会特殊对待这些属性值，一律视为无引号字符串。
- sass字符串
SassScript 支持 CSS 的两种字符串类型：
#有引号字符串 (quoted strings)，如 "Lucida Grande" 、'http://baidu.com'；
#无引号字符串 (unquoted strings)，如 sans-serifbold。
#scss
@mixin strings($color){
body.cesj #{$color}:after{
content: "welcome,nihao!"
}
}
@include strings("h1");
#编译后的结果
body.cesj h1:after {
content: "welcome,nihao!"; }
#ps:#{$color} 插入方法，后面会有
- sass数组 (Lists)
数组 (lists) 指 Sass 如何处理 CSS 中 margin: 10px 15px 0 0 或者 font-face: Helvetica, Arial, sans-serif 这样通过空格或者逗号分隔的一系列的值。事实上，独立的值也被视为数组 —— 只包含一个值的数组。
margin: 10px 15px 0 0
font-face: Helvetica, Arial, sans-serif
#独立的值也被视为值列表——只包含一个值的值列表。
font-size:14px
数组中可以包含子数组，比如 1px 2px, 5px 6px 是包含 1px 2px 与 5px 6px 两个数组的数组
如果内外两层数组使用相同的分隔方式，需要用圆括号包裹内层，所以也可以写成 (1px 2px) (5px 6px)。
变化是，之前的 1px 2px, 5px 6px 使用逗号分割了两个子数组 (comma-separated)，
而 (1px 2px) (5px 6px) 则使用空格分割(space-separated)。
#scss
.ul-li{
margin: 0px 5px 7px 9px;
padding: (0px 5px)(7px 9px);
}
#编译后的css
.ul-li {
margin: 0px 5px 7px 9px;
padding: 0px 5px 7px 9px; }
数组本身没有太多功能，但 Sass list functions 赋予了数组更多新功能：
nth函数可以直接访问数组中的某一项；
join函数可以将多个数组连接在一起；
append函数可以在数组中添加新值；
@each指令能够遍历数组中的每一项。
8、sass 运算
SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)
如果必要会在不同单位间转换值。
- 加法运算
#scss in即inch,是英寸的意思
html{
width: 20px + 8in;
}
#编译后的css
html {
width: 788px; }
ps：对于携带不同类型的单位时，在 Sass 中计算会报错，如下例所示
html{
width: 20px + 1em;
}
#Error: Incompatible units: 'em' and 'px'.
in mm cm pt pc px都可以
- 减法运算
#scss
html{
width: 800px - 20px;
}
#编译后的css
html {
width: 780px; }
- 除法运算
如果按照下面的写是不对的，结果不会进行除法运算
html{
width: 20px / 2;
}
需要加上（）进行运算
html{
width: (20px / 2);
}
#“/”符号会当作除法运算符之外，如果“/”符号在已有的数学表达式中时，也会被认作除法符号。
html{
width: 100px / 2 + 2in;
}
#编译后的css
html {
width: 242px; }
也可以通过变量进行除法运算
$width:500px;
html{
width: $width / 2 + 2in;
}
#编译后的css
html {
width: 442px; }
- 乘法运算
#scss Error: 40px*px isn't a valid CSS value.
html{
width: 20px * 2px;
}
#正确方式
html{
width: 20px * 2;
}
- 颜色运算
所有算数运算都支持颜色值，并且是分段运算的。也就是说，红、绿和蓝各颜色分段单独进行运算。
html{
color: #010203 + #040506;
}
计算方式：1+4=5 2+6 = 7 3+6 = 9
#编译后的css
html {
color: #050709; }
html {
color: #010203 * 2;
}
#编译后的css
html {
color: #020406; }
如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。
#scss
html{
color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}
#编译后的css
html {
color: rgba(255, 255, 0, 0.75); }
颜色值的 alpha channel 可以通过 opacify或 transparentize两个函数进行调整。
#scss
$translucent-red: rgba(255, 0, 0, 0.5);
html{
color: opacify($translucent-red, 0.3);
background-color: transparentize($translucent-red, 0.25);
}
#编译后的css
html {
color: rgba(255, 0, 0, 0.8);
background-color: rgba(255, 0, 0, 0.25); }
- 字符串运算 (String Operations)
+可用于连接字符串
#scss
html{
cursor: e + -resize;
}
#编译后的css
html {
cursor: e-resize; }
#scss
html{
content: "Foo " + Bar;
font-family: sans- + "serif";
}
#编译后的css
html {
content: "Foo Bar";
font-family: sans-serif; }
#scss
html{
margin: 3px + 4px auto;
}
#编译后的css
html {
margin: 7px auto; }
在有引号的文本字符串中使用#{}插值语句可以添加动态的值：
#scss
html{
content: "I ate #{5 + 10} pies!";
}
#编译后的css
html {
content: "I ate 15 pies!"; }
- 布尔运算 (Boolean Operations)
SassScript 支持布尔值的 and, or, 和 not 运算。
and运算
#scss
$age:10;
html{
@if ($age > 10 and $age < 25) {
color: green;
}@else{
color:red;
}
}
#编译后的css
html {
color: red; }
or 运算
#scss
$age:15;
html{
@if ($age<20 or $age>5) {
color: green;
}@else{
color:red;
}
}
#编译后的css
html {
color: green; }
not 运算
#scss
$age:10;
html{
@if ($age not 25) {
color: green;
}@else{
color:red;
}
}
#编译后的css
html {
color: green; }
- 插值语句
#scss
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
#编译后的css
p.foo {
border-color: blue; }
先到此吧，后续还会继续更新
