Scss----@-Rules和控制指令
2020.12.14 23:50
Scss
[email protected]@import
Sass擴充套件了@import的功能，允許其匯入SCSS或SASS檔案。被匯入的檔案將合併編譯到同一個CSS檔案中，另外，被匯入的檔案中所包含的變數或混合指令(mixin)都可以在匯入的檔案中使用
通常，@import
@import僅作為普通的CSS語句，不會匯入任何Sass檔案
- 檔案拓展名是
.css - 檔名以
http://為開頭 - 檔名是
url() @import包含media queries(媒體資訊)
如果不在上述情況內，檔案的拓展名是.scss或.sass，則匯入成功。沒有指定拓展名，Sass將會試著尋找檔名相同，拓展名為.scss或.sass的檔案並將其匯入
可行方法
@import "foo.scss";
@import "bar";
不可行方法
-
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo); -
Sass允許同時匯入多個檔案，例如同時匯入
rounded-corners與text-shadow兩個檔案:
@import "rounded-corners","text-shadow"; -
匯入的檔案也可以使用
#{}插值語句，但不是通過變數動態匯入Sass檔案，只能作用於CSS的url()匯入方式:
$family:unquote("Broid+Sans");
@import url("http://fonts.googleapis.com/css?family=\#{$family}");
編譯為:@import url("http://fonts.googleapis.com/css?family=Broid+Sans"); -
如果有一個SCSS或Sass檔案需要引入，但是你又不希望它被編譯為一個CSS檔案時，這是，可以在檔名前面加上一個下劃線，就能避免被編譯。這將告訴Sass不要把它編譯為CSS檔案。然後就可以像往常一樣引入這個檔案了，而且還可以省略掉檔名前面的下劃線。
-
除此之外，還支援巢狀
@import，但是不可以在混合指令(mixin)或控制指令(control directives)中巢狀@import
[email protected]@media
- Sass中
@media指令與CSS中用法一樣，只是增加了一點額外功能:允許其在CSS規則中巢狀。 - 如果
@media巢狀在CSS規則內，編譯時，@media將被編譯到檔案的最外層，包含巢狀的父選擇器 - 上面的功能讓
@media使用起來更加方便，不需要重複使用選擇器，也不會打亂CSS的書寫流程
scss檔案
編譯後的css檔案
@media的queries允許互相巢狀使用，編譯時，Sass自動新增add
scss檔案
編譯後的css檔案
@media甚至可以使用SS(比如變數，函式，以及運算子)代替條件的名稱或者值
scss檔案
編譯後的css檔案:
[email protected]@extend
@extend即繼承。在設計網頁的時候經常遇到這種情況:一個元素使用的樣式與另一個元素完全相同，但又添加了額外的樣式
總的來說：
- 支援層疊繼承
- 支援多繼承
- 允許延伸任何定義給單個元素的選擇器(但是允許不一定好用)
簡單實現繼承
.b複用了.a的樣式 格式: @extend: 選擇器(想繼承誰就寫誰);
多次繼承:
.c也可以繼承繼承過.a後的.b(巢狀繼承)
選擇器佔位符:%placeholder為選擇器佔位符，配合@extend-Only選擇器使用
效果:只定義了樣式，但不會對原有選擇器匹配的元素生效
- eg1
/*Scss*/
%img{
color:red;/*只定義樣式，不會對img元素生效*/
}
.path{
@extend %img;
}
/*編譯後的css*/
.path{
color:red;
}
- eg2
/*Scss*/
#content a%extreme{
color:blue;
font-weight:bold;
}
.notice{
@extend %extreme;
}
/*編譯後的css*/
#content a.notice{
color:blue;
font-weight:bold;
}
必須是"."和"#"選擇器
04.其餘指令
@at-root
@at-root使一個或多個規則在文件的根發出，而不是巢狀在其父選擇器下。- 可以與單個內聯選擇器一起使用且
@at-root使多個規則跳出巢狀 @at-root預設情況下並不能使用規則或者選擇器跳出指令，通過使用without和with可以解決該問題
@debug
- 用於調式，按標準錯誤輸出流輸出
@warn
- 用於警告，按標準錯誤輸出流輸出
@error
- 用於報錯，按標準錯誤輸出流輸出
05.控制指令----邏輯判斷
1.if()
- 本質是三元運算子
- 表示式:
if(expression,value1,value2)表示式，正確時的值，錯誤時的值 - 示例:
scss:p{ color : if ( 1 + 1 == 2, green, yellow );}
css:p{ color : green;}
2.@if
- 條件判斷
- 當
@if的表示式返回值不是false或者null時，條件成立，輸出{}內的程式碼 @if聲明後面可以跟很多個@else if宣告，或者一個@else宣告。如果@if宣告失敗，Sass將逐漸執行@else if宣告，如果全部失敗，最後執行@else宣告
示例：
- 單
@if
/*Scss*/
p{
@if 1+1 == 2 {
color:red;
}
}
/*編譯後的css*/
p{
color:red;
}
/*Scss*/
p{
@if 1+1 !=2 {
color:red;
}@else{
color:blue;
}
}
/*編譯後的css*/
p{
color:blue;
}
@if - @else if [email protected]
/*Scss*/
$number:20;
p{
@if $number==18{
color:red;
}@else if $number==19{
color:blue;
}@else{
color:green;
}
}
/*編譯後的css*/
p{
color:green;
}
06.控制指令----迴圈
1.@for
表示式：@for $var from <start> through <end>或@for $var from <start> to <end>
through和to的相同點與不同點:
- 相同點:兩者均包含
<start>的值 - 不同點:through包含
<end>，to不包含
示例:
/*Scss*/
@for $i from 1 through 3 {
item-#${i} {
width:2em * $i;
}
}
/*編譯後的css*/
.item-1{
width:2em;
}
.item-2{
width:4em;
}
.item-3{
width:6em;
}
2.@while
- 表示式：
@while expression @while指令重複輸出格式直到表示式返回結果為false- 可以實現比
@for更復雜的迴圈，但是很少會用到
示例:
/*Scss*/
$i:6;
@while $i > o{
.item-#{$i}{
width:2em * $i;
}
/*@for會自動+1,@while不會*/
/*@while要人為控制迴圈變數進行迭代*/
$i: $i - 2;
}
/*編譯後的css*/
.item-6{
width:12em;
}
.item-4{
width:8em;
}
.item-2{
width:4em;
}
3.@each
- 表示式：
$var in $vars $var可以是任何變數名$vars只能是Lists或者Maps
示例:
- 一維列表
/*Scss*/
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
/*編譯後的css*/
.puma-icon {
background-image: url('/images/puma.png');
}
.sea-slug-icon {
background-image: url('/images/sea-slug.png');
}
.egret-icon {
background-image: url('/images/egret.png');
}
.salamander-icon {
background-image: url('/images/salamander.png');
}
- 二維列表
/*Scss*/
@each $animal, $color, $cursor in (puma, black, default),
(sea-slug, blue, pointer),
(egret, white, move) {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
border: 2px solid $color;
cursor: $cursor;
}
}
/*編譯後的css*/
.puma-icon {
background-image: url('/images/puma.png');
border: 2px solid black;
cursor: default;
}
.sea-slug-icon {
background-image: url('/images/sea-slug.png');
border: 2px solid blue;
cursor: pointer;
}
.egret-icon {
background-image: url('/images/egret.png');
border: 2px solid white;
cursor: move;
}
- maps
/*Scss*/
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
#{$header} {
font-size: $size;
}
}
/*編譯後的css*/
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
2020.12.15 01:37