sass编写高质量的css---（基础语法结构）

一：基础
1、Sass:最早也是最成熟的CSS预处理语言
2、Less:兼容CSS的最流行的css预处理语言
3、Stylus:主要用于node.js社区

二：scss写法
1）混入
@mixin alert($color:blue){
color:$color;
}

2)继承（p继承block类的样式）
.block{
margin：0;
padding:0;
}

p{
@extend .block
}

3）变量
a.局部变量：在具体的元素内部定义变量

body{
$color:red;//局部变量，只有body可以访问到
$color:red !global;//全局变量，h1也可以访问到
color:$color;
}

h1{

color:$color;//这里可以访问到的是带有!global的全局变量
}

b.全局变量（h1例子）

c.变量默认值
$font-size:12px;//由于先后顺序问题，会取14px的，这个是初始值。
$font-size:14px;//相对于12px的变量属于重新赋值，要是想优先取12px的，需要

在12px后面加上!default才算是默认值优先

d.多值变量
$paddings:10px 20px 30px 50px;//定义
$maps:(color:red,borderColor:blue);

body{

padding:$paddings;//全部使用
padding-left:nth($paddings,1);//表示取第一个值即10px;

注意：这里的索引值是1、2、3、4，而不是往常习惯的索引0123。

background-color:map-get($maps,color);//使用了color
border-color:map-get($maps,borderColor);

}

e.变量特殊用法

1）$className:main;//定义

.#{$className}{//使用
width:50px;
height:20px;
}

css渲染结果：
.main{
width:50px;
height:20px;
}

2）$text-info:red;//定义

h2{
color:$text_info;//中划线等同于下划线
}

4）导入
1.原生CSS导入
@import "css.css";
@import "http://css.css";

2.导入css.scss
@import "css";

5)嵌套
1、&：引用父级的元素
a{
color:red;
&:hover{
color:blue;
}
}

渲染结果：
a{ color: red;}

a:hover{ color:blue;}

2、@at-root:跳出嵌套
body{
background: red;
header{
width:200px;
.box{//这样写box是在body和header内部
height:200px;
}
}
}

body{
background: red;
header{
width:200px;
@at-root.box{//这样写box是在body和header外部，单独出来了
height:200px;
}
@media screen and(max-width:600px){
@at-root .box{//@media类的无法跳出嵌套，box依然会在@media内部
color: blue;
}
}
}
}

body{
background: red;
header{
width:200px;
@at-root.box{//这样写box是在body和header外部，单独出来了
height:200px;
}
@media screen and(max-width:600px){
@at-root(without:media){
.box{//可以跳出嵌套，box会在@media外部
color: blue;
}
}
}
@at-root .text-info{
color:red;
@at-root nav &{
color:blue;
}
}
}

text-info渲染效果
.text-info{
color:red;
}
nav .text-info{
color:blue;
}

6)继承与多继承

.text{
color: red;
}

.box{
background: yellow;
}

.small{//继承了.text,.box两个的样式
@extend .text,.box;
}

1.继承的局限性：包含选择器和相邻兄弟选择器无法继承；若继承的元素是a，而a又

有hover状态，则该状态也会被继承过来。

2.交叉继承：
a span{
font-weight:900;
}
div .box{
@extend span;
}

渲染结果(奇怪)：a span , a div .box , div a .box{ font-weight:900;}

3.在@midia内继承的作用域:只能继承@midia内部的元素

@media screen and(max-width:600px){
.alert{ color:red; }
.samll{
@extend .alert;
}
}

渲染效果：@media screen and(max-width:600px){
.alert,.samll{ color:red; }
}

4.占位选择器:没有使用到，但是依然存在或者不愿意继承过去
%alert{ font-size:20px;}

.text{ color:blue;}

.am{
@extend %alert,.text;
}

渲染效果：.text{ color:blue;} .am{color:blue;}

占位选择器的意义在于：对于公用的属性，可以定义出来，要是某些元素没有使用到

，就使用占位选择器，这样就不会将该属性继承过去。

$bt:true;
$bf:false;

5、运算符：1)必须和前后的元素用空格隔开，否则编译器会认为找不到定义的元素。
2)运算单位必须一致，且都必须要，但是除法不同，如果只有一个有单位

，则必须是前面的也就是被除数有单位（ height:(100px/2);），否则报错。

$width1:20px;
$width2:10px;
.box{ width: $width1 + $width2; padding:$width1 + $width2 auto;}
渲染结果：.box{ width:30px; padding:30px auto;}

p{ width: $width2/2; width:round($width2)/2; height:(100px/2);}
渲染结果：p{width: 5px; width: 5px; height:50px;}

6、双引号的问题：即编译时只看前一个是否有引号，有则结果也有，没有，则结果也

没有

a:hover{ content: "A" + bc;}--结果-->a:hover{ content: "ABC";}
a:hover{ content: A + 'bc';}--结果-->a:hover{ content: ABC;}

7、Mixin:传递参数运用会更灵活。

例一：@mixin cont{ color: red;}
body{ @include cont;}--结果--> body{ color:red;}这样写的效果类似于继承

例二：@mixin mount($color:red,$padding:30px;){
color: $color;
padding:$padding;
}
body{@include mount(#f0f);}--结果-->body{ color:#f0f;}//这样只能适用于一

个参数。

body{@include mount($padding:40px;);}--结果-->body{ padding:40px;}//这样

适用于多个参数，使用键值对的方式。

在mixin定义时参数后打三点，表示调用时可以传递n个参数。
例三：@mixin box-shadow($shadow...){
-moz-box-shadow:$shadow;
-webkit-box-shadow:$shadow;
box-shadow:$shadow;
}

.shadow{
@include -moz-box-shadow(0px 4px 4px red,0 0 4px #647787);
@include -webkit-box-shadow(0px 4px 4px red,0 0 4px #647787);
@include box-shadow(0px 4px 4px red,0 0 4px #647787);
}

8、针对响应式布局采用mixin实现即 media query mixin
定义：
@mixin style-for-iphone{
@media only screen and(min-device-width:320px)and (max-device-

with:560px){
@content;
}
}

使用：
@include style-for-iphone{
background:red;
}

渲染结果：

@media only screen and(min-device-width:320px)and (max-device-

with:560px){
background:red;
}