sass
1. 變量
定義：$變量名： 參數(shù)
使用：
css{
屬性：$變量名
}
2. 嵌套
2.1 選擇器嵌套
fu{
zi{
sun{
}
}
}
如果我們要獲取父選擇器厅贪，可以用&
fu{
zi{
a{
}
$：hover{
這里就是zi
}
}
$:hover{
這個就是fu
}
}
2.2 樣式的嵌套
首先常規(guī)的屬性例如：
body{
font-family: ...;
font-size:15px;
font-weight: normal;
}
使用嵌套的寫法：
body{
font:{
family: ....;
size: 15px;
weight: normal;
}
}
3. 混合-mixin
3.1 基本使用
//使用如下
@mixin alert{
color: '';
background:...;
a{
color: red;
}
}
.my-class{
@include alert;
}
編譯后的css如下
.my-class{
color: '';
background:...;
}
.my-class a{
color: red;
}
3.2 mixin的參數(shù)
@mixin alert($text-clor,$background){
color: $text-clor;
background-color:$background;
}
//傳入?yún)?shù)
.my-class{
@include alert(red,pink);
}
4. 繼承
.a{
padding:10;
}
.b{
@extend .a;
margin:10;
}
//編譯完后的css
.a .b{
padding: a0;
}
.b{
margin:10
}
與a有關(guān)的也會繼承下來绣张，比如
.a .c{}繼承之后.a .c .b{}
5. @import
partials文件就是一個單獨的小文件狂秦，通過導(dǎo)入來實現(xiàn)css模塊化
用_開頭的文件就是partials 這里的文件不會去編譯
使用的時候直接導(dǎo)入
//定義文件_base.scss
body{
margin:0;
...
}
//導(dǎo)入的時候不需要加_
@import 'base'
6.函數(shù)
sass中可以對數(shù)字，字符串使用一些函數(shù)
6.1 數(shù)字
常用的有 abs(),round(),ceil()
6.2 字符串
1. 定義一個字符串 $str : "hello str"
- 轉(zhuǎn)換為大寫to-upper-case($str)
- 轉(zhuǎn)換為小寫to-lower-case($str)
- 獲取長度str-lenght($str)
- 獲取索引str-index()
- 插入str-insert(字符串坯临，內(nèi)容焊唬，位置)
6.3 顏色
*顏色的表示方式可以用RGB（），RGBA()來表示
hsl（色相看靠，飽和度，明度）液肌，hsla()同上
-
adjust-hue()調(diào)整色相
color:adjust-hue($base-color,137deg)
-
lighten和darken 用來設(shè)置顏色得到明度和暗度
- lighten()變亮
- darken()變暗
$base-color:red; $light-colr:lighten($base-color,30%); $darken-colr:darken($base-color,20%); -
飽和度函數(shù)
- saturate（）增加顏色的飽和度
- desaturate() 降低顏色的飽和度
-
透明度函數(shù)
- 不透明度opacify($base,0.3)
- 透明度transparentize($base,0.3)
7. interpolation 插入變量
一般要在屬性中插入變量的這樣寫 用#{}占位
例子：
$version:1.0.1;
$name: "info";
$str: "border";
.my-#{$name}{
#{$str}-color:red
}
8. 控制指令
@if
@if $isuse{
//條件為真的話在執(zhí)行
}@else if 條件{
}@else {
}
@for
//語法
@for $var from <開始值> through <結(jié)束值> {
挟炬。。。
}
//例子
@$lenght: 4;
@for $i from 1 through $lenght {
.col-#{$i}{
height:100%/$i
}
}
@each
$icons: success erro warning;
@each $icon in $icons {
.icon-#{$icon}: {
background-image：url(../#{$icon}.png)
}
}
//遍歷結(jié)果
@while
@while 條件{
/*
*注意結(jié)束條件
*/
}
