scss語法
scss常見用法
阮一峰 sass語法
變量 $
定義
1- 變量的定義一般以$開頭，某個變量的作用域僅限于他們定義的層級以及子層級。
如果變量是定義在所有嵌套選擇器之外的，那么他們可以在各處被調用。
$color1:#aeaeae;
.div1{
background-color:$color1;
}
2- 如果希望某個在子選擇器中定義的變量能夠成為全局變量，可以使用!global關鍵字：
#main {
$width: 5em !global;
width: $width;
}
#sidebar {
width: $width;
}
3- sass的默認變量僅需要在值后面加上 !default即可。
默認變量一般是用來設置默認值，然后根據需求來覆蓋的，覆蓋的方式也很簡單，只需要在默認變量之前重新聲明變量
$baseLineHeight: 1.5 !default;
$baseLineHeight: 2;
body{
line-height: $baseLineHeight;
}
//css style
//-------------------------------
body{
line-height:2;
}
嵌套引用,特殊變量
嵌套引用在其他編程語言中即是字符串插值，需要用#{}進行包裹：
一般我們定義的變量都為屬性值，可直接使用
但是如果變量作為屬性或在某些特殊情況下等則必須要以 #{$variables}形式使用。
$left:left;
.div1{
border-#{$left}-width:5px;
}
多值變量 list map
多值變量分為list類型和map類型
簡單來說list類型有點像js中的數組，而map類型有點像js中的對象。
list數據可通過空格，逗號或小括號分隔多個值，可用 nth($var,$index)取值。
定義
//一維數據
$px: 5px 10px 20px 30px;
//二維數據，相當于js中的二維數組
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);
使用
$linkColor: #08c #333 !default;//第一個值為默認值，第二個鼠標滑過值
a{
color:nth($linkColor,1);
&:hover{
color:nth($linkColor,2);
}
}
//css style
//-------------------------------
a{
color:#08c;
}
a:hover{
color:#333;
}
map數據以key和value成對出現，其中value又可以是list。
格式為: `$map: (key1: value1, key2: value2, key3: value3);`,通過 `map-get($map,$key)`取值。
關于map數據還有很多其他函數如 `map-merge($map1,$map2)`, `map-keys($map)`,`map-values($map)`等
定義
$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);
使用
//sass style-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
}
//css style-------------------------------
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
在 Sass 中 map自身帶了七個函數：
map-get($map,$key)：根據給定的 key 值，返回 map 中相關的值。
map-merge($map1,$map2)：將兩個 map 合并成一個新的 map。
map-remove($map,$key)：從 map 中刪除一個 key，返回一個新 map。
map-keys($map)：返回 map 中所有的 key。
map-values($map)：返回 map 中所有的 value。
map-has-key($map,$key)：根據給定的 key 值判斷 map 是否有對應的 value 值，如果有返回 true，否則返回 false。
keywords($args)：返回一個函數的參數，這個參數可以動態的設置 key 和 value。
變量計算
$left:20px;
.div1{
margin-left:$left+12px;
}
p {
font: 10px/8px; // Plain CSS, no division
$width: 1000px;
width: $width/2; // Uses a variable, does division
width: round(1.5)/2; // Uses a function, does division
height: (500px/2); // Uses parentheses, does division
margin-left: 5px + 8px/2px; // Uses +, does division
font: (italic bold 10px/8px); // In a list, parentheses don't count
}
選擇器
嵌套
.div1{
.span1{
height: 12px;
}
.div2{
width: 16px;
}
}
屬性也可以嵌套，比如border-color屬性，可以寫成：
p {
border: { 注意，border后面必須加上冒號。
color: red;
}
}
父元素引用
在嵌套的子層級中，允許使用&引用父元素：
.div1{
&:hover{
cursor: hand;
}
}
代碼重用
允許一個選擇器，繼承另一個選擇器
.class1{
font-size:19px;
}
.class2{
@extend .class1;
color:black;
}
如果在class2后面有設置了class1的屬性，那么也會影響class2
class1{
font-size:19px;
}
.class2{
@extend .class1;
color:black;
}
.class1{
font-weight:bold;
}
import 引用外部css文件
@import "_test1.scss";
@import "_test2.scss";
@import "_test3.scss";
mixin&include 代碼塊的復用
使用 @mixin 命令，定義一個代碼快
@mixin left {
float: left;
margin-left: 10px;
}
使用 @include 命令，調用這個mixin
div {
@include left；
}
1- 參數與缺省值
邊距設置
@mixin common($value1,$value2,$defaultValue:12px){
display:block;
margin-left:$value1;
margin-right:$value2;
padding:$defaultValue;
}
.class1{
font-size:16px;
@include common(12px,13px,15px);
}
.class2{
font-size:16px;
@include common(12px,13px);
}
2- 瀏覽器前綴設置設置
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
編程式方法
流程控制
條件語句
@if
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
@else
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
三目判斷
語法為： if($condition, $if_true, $if_false) 。三個參數分別表示：條件，條件為真的值，條件為假的值。
循環語句
for
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
while
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
each
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
函數
sass允許用戶編寫自己的函數
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
