中文文檔地址：https://www.sasscss.com/docs/#css-extensions
1. 嵌套樣式
允許將一個(gè) CSS 樣式嵌套進(jìn)另一個(gè)樣式中姨蟋。
body {
min-height: 100vh;
.box {
height: 100px;
background: #000;
display: flex;
align-items: center;
justify-content: center;
.content {
height: 50px;
width: 50px;
background: #999;
}
}
}
2. 引用父級(jí)選擇器： ‘&’
a {
font-weight: bold;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
& 必須出現(xiàn)在的選擇器的開(kāi)頭位置, 可以跟隨后綴。
#main {
color: black;
&-sidebar { border: 1px solid; }
}
2. 嵌套屬性
.box {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
// 編譯為
.box {
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}
3. 變量 ‘$’
$width: 100px;
.box {
width: $width;
}
作用域： 不在任何嵌套選擇器內(nèi)定義的變量則在可任何地方使用立帖，嵌套在選擇器內(nèi)的只有嵌套層級(jí)范圍內(nèi)可用眼溶。可以在后面添加 !global 標(biāo)志厘惦，就可以全局引用（不推薦使用）
#main {
$width: 5em !global;
width: $width;
}
#sidebar {
width: $width;
}
4. 運(yùn)算
支持對(duì)數(shù)字標(biāo)準(zhǔn)的算術(shù)運(yùn)算（加法 +偷仿，減法 - ，乘法 * 宵蕉，除法 / 和取模 % ）酝静，數(shù)字支持關(guān)系運(yùn)算符(<, >, <=, >=)，并且所有類(lèi)型支持相等運(yùn)算符(==, !=)
- 除法
/
p {
font: 10px/8px; // 原生的CSS羡玛，不作為除法
$width: 1000px;
width: $width/2; // 使用了變量, 作為除法
width: round(1.5)/2; // 使用了函數(shù), 作為除法
height: (500px/2); // 使用了括號(hào), 作為除法
margin-left: 5px + 8px/2px; // 使用了 +, 作為除法
font: (italic bold 10px/8px); // 在一個(gè)列表（list）中别智，括號(hào)可以被忽略。
}
如果你想純CSS 的/和變量一起使用（愚人碼頭注：即/不作為除法使用）稼稿，你可以使用#{}插入他們薄榛。例如：
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
5. mixin
// 定義 @minxin
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
// 引入 @include
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
可以設(shè)置參數(shù)
@mixin large-text($color) {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: $color;
}
.page-title {
$green: green;
@include large-text($green);
padding: 4px;
margin-top: 10px;
}
// 可以引入默認(rèn)值，要是沒(méi)有傳參數(shù)让歼，就使用默認(rèn)值
@mixin large-text($color: red) {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: $color;
}
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
// color 會(huì)編譯為 red
6. 函數(shù)
@function px($npx){
@return $npx/375 * 100vw
}
.icons {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 px(20);
margin-top: px(20);
.icon {
background: #eee;
height: px(48);
width: px(48);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
}
}
// 可以適應(yīng)不同尺寸手機(jī)端
7. 媒體查詢
$break-small: 320px;
$break-large: 1024px;
@mixin respond-to($media) {
@if $media == handhelds {
@media only screen and (max-width: $break-small) { @content; }
}
@else if $media == medium-screens {
@media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; }
}
@else if $media == wide-screens {
@media only screen and (min-width: $break-large) { @content; }
}
}
.profile-pic {
float: left;
width: 250px;
@include respond-to(handhelds) { width: 100% ;}
@include respond-to(medium-screens) { width: 125px; }
@include respond-to(wide-screens) { float: none; }
}
// 編譯后
.profile-pic {
float: left;
width: 250px;
}
@media only screen and (max-width: 320px) {
.profile-pic {
width: 100%;
}
}
@media only screen and (min-width: 321px) and (max-width: 1023px) {
.profile-pic {
width: 125px;
}
}
@media only screen and (min-width: 1024px) {
.profile-pic {
float: none;
}
}
8. 一個(gè)按鈕小例子 （hover 之后上下敞恋，左右抖動(dòng)）
*{box-sizing: border-box; padding: 0; margin: 0;}
body{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
@mixin createButton($color){
background: $color;
box-shadow: 0 4px 0 darken($color,15%)
}
.buttonWrapper{
button {
margin: 0 40px;
border: none;
padding: 10px 20px;
border-radius: 4px;
color: #fff;
font-size: 18px;
&:first-child {
$blue: #55acee;
@include createButton($blue);
&:hover {
animation-duration: 0.3s;
animation-name: left-right;
}
}
&:nth-child(2) {
$green: #2ecc71;
@include createButton($green);
&:hover{
animation-name: up-down;
animation-duration: 0.3s;
}
}
}
}
$n: 10%;
$step: 25%;
@keyframes left-right {
@for $i from 0 to 4 {
#{$i * $step}{
@if $i % 2 == 0 {
transform: translateX($n)
}@else{
transform: translateX(-$n)
}
}
}
100%{
transform: translateX(0)
}
}
$n2: 20%;
$step: 25%;
@keyframes up-down {
@for $i from 0 to 4 {
#{$i * $step}{
@if $i % 2 == 0 {
transform: translateY($n2)
}@else{
transform: translateY(-$n2)
}
}
}
100%{
transform: translateY(0)
}
}
預(yù)覽
