概念
css不是編程語言，css代碼過于靜態，sass的出現，使得css可以通過編程語言來實作樣式的書寫
功能
擴展了css3.0，增加了規則、變數、混合、判斷、選擇器、繼承等特性，使得css代碼編程化，且易于組織和維護
運行環境
sass是基于ruby平臺運行的，gem是此平臺的包管理工具
sass的安裝（請確保ruby已安裝）
cmd運行 gem install sass
sass的編譯
ps：sass檔案名的后綴是scss，sass檔案可以撰寫css語法，并生成css檔案
編譯語法(sass檔案轉至css檔案)：
sass 檔案名(sass檔案):檔案名(css檔案）
ps： css檔案名存在為覆寫，不存在為創建
編譯格式化命令（sass檔案轉至css檔案并實作相關功能）:
sass --style 格式化命令 檔案名（sass檔案）:檔案名（css檔案）
格式化命令如下：
nested：嵌套縮進的css代碼，它是默認值，
expanded：沒有縮進的、擴展的css代碼，
compact：簡潔格式的css代碼，（去回車）
compressed：壓縮后的css代碼，（去回車去空格）
watch:監聽模式（只要sass檔案修改，與之定義的檔案會自動修改，無需重運行）
編程語法
變數的定義:
普通變數 $變數名：值
特殊變數 #{變數名} ps：在屬性名中的變數，與字串模板中的${}含義相同
默認變數 $變數名:值 ! default ps:只要有相同變數出現，就會覆寫默認變數，無關代碼執行順序
計算：
$size:10px;
#box2 {
width: $size*10;
}
嵌套：
#box3 {
width: 100px;
height: 100px;
background: yellow;
color: #333;
a {
font-size: 14px;
&:hover {
text-decoration: underline;
}
}
}
函式
$size:100;
@function myStyle($px) {
@return $size*$px;
}
#box4 {
width: 100px;
height: myStyle(5px);
}
判斷
$type: monster;
#box5 {
width: 100px;
height: 100px;
@if $type==ocean {
background: blue;
}
@else if $type==matador {
background: red;
}
@else if $type==monster {
background: green;
}
@else {
background: black;
}
}
回圈
@for $i from 1 to 4 {
.item-#{$i} {
width: 2em*$i;
}
}
$i: 2;
@while $i>0 {
.item-#{$i} {
width: 2em * $i;
}
$i: $i - 1;
}
混合樣式（預定義樣式，提高代碼的復用性）
$color:red;
@mixin myStyle($px) {
height: 100px;
background-color: $color;
font-size: $px;
}#box6 {
@include myStyle(36px);
width: 500px;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/394225.html
標籤：其他
上一篇：CobaltStrike基礎使用