Scss前處理器的使用總結
摘要：
變數 、巢狀、Mixin混合、function函式、插值
變數及檔案匯入
通過$定義變數
$white:#fff;
$black:#000;
變數引用
.containner{
color:$black;
}
通常我們會單獨建立一個區域性scss檔案來定義...
變數 、巢狀、Mixin混合、function函式、插值
變數及檔案匯入
通過$定義變數
$white:#fff; $black:#000;
變數引用
.containner{
color:$black;
}
通常我們會單獨建立一個區域性scss檔案來定義這些變數 例如 _varables.scss
varables前面的下劃線用來區分這是區域性檔案，不會生成對應的css檔案，通過@import方式在其他檔案中匯入該檔案（下劃線可以省略）
@import 'varables';
巢狀
例如我們有這樣一個html結構
<div class="containner"> <div class="banner"></div> </div>
使用巢狀語法可以寫成：
.containner{
background: #eee;
color:$black;
.banner{
background: red;
}
}
最後編譯成css：
.containner {
background: #eee;
color: #000; }
.containner .banner {
background: red; }
高階用法
&、>、+、~
使用&符合使得區分元素不以後代選擇器的方式連線，例如連結使用到的hover效果
a{
color:red;
&:hover{
color:blue;
}
}
編譯後
.containner a:hover {
color: blue; }
mixin混合
如果我們有多個地方使用到相同的樣式，我們就可以將其寫成一個mixin方法，然後在不同的地方去使用它
一般通過@mixin來定義一個函式，@include來引用
例如定義一個用於清除浮動的mixin方法
@mixin clearfix() {
&::after {
display: block;
clear: both;
content: "";
}
}
我們就可以這樣使用
.list{
list-style: none;
@include clearfix();
.item{
float: left;
}
}
mixin方法傳參
類似JavaScript函式我們可以傳遞引數
@mixin colorlink($normal, $hover, $visited){
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
使用
@include colorlink(blue,red,green);
也可以使用這種方式，不用區分引數順序
@include colorlink( $normal: blue, $visited: green, $hover: red );
設定預設引數值
通過以下方式來這是預設引數值
@mixin size($size:50px){
font-size: $size;
}
呼叫的時候我們可以根據需求來決定是否傳遞引數
.title{
// @include size();
@include size(20px);
}
@fuction和@mixin
區別：
- sass本身就有一些內建的函式，方便我們呼叫，如強大的color函式，還有darken、rgba、ie-hex-str、percentage、lighten、length、nth、unit、unitless等
- 其次就是它返回的是一個值，而不是一段css樣式程式碼什麼的
內建函式
1、rgba
rgba(blue, 0.2) => rgba(0, 0, 255, 0.2)
2、percentage
將一個沒有單位的數字轉成百分比形式
percentage(0.2) => 20%
通過@function來自定義函式
// px轉em
@function pxToEm($px, $base: 16) {
@return ($px / $base) * 1em;
}
呼叫
p{
font-size:pxToEm(20);
}
解析
p{
font-size: 1.25em;
}
其他
1、插值語句 #{}
通過 #{} 插值語句可以在選擇器或屬性名中使用變數：
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
生成
p.foo {
border-color: blue; }
2、使用@for指令輸出重複格式內容
@for $i from 1 through 28
{
.bg-#{$i}
{
background: url(brand_day_review#{$i}.jpg) no-repeat center / 1560px auto;
}
}
生成
.containner .bg-1 {
background: url(brand_day_review1.jpg) no-repeat center/1560px auto; }
.containner .bg-2 {
background: url(brand_day_review2.jpg) no-repeat center/1560px auto; }
.containner .bg-3 {
background: url(brand_day_review3.jpg) no-repeat center/1560px auto; }
.containner .bg-4 {
background: url(brand_day_review4.jpg) no-repeat center/1560px auto; }
.containner .bg-5 {
background: url(brand_day_review5.jpg) no-repeat center/1560px auto; }
除了@for，其他的還有@if 、@each、@while等，這些都屬於控制指令