一：基礎
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;
}

?

?

?

?

?

?

?

?

轉載于:https://www.cnblogs.com/LindaBlog/p/9454671.html

總結

以上是生活随笔為你收集整理的sass编写高质量的css---（基础语法结构）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。