創(chuàng)新互聯(lián)網(wǎng)站開發(fā)為您帶來Scss常用語法講解

今天創(chuàng)新互聯(lián)的網(wǎng)站開發(fā)工程師將為大家?guī)黻P(guān)于Scss語句的用法說明，幫助廣大的網(wǎng)站用戶可以更好的了解我們創(chuàng)新互聯(lián)的網(wǎng)站開發(fā)語言以及能夠在成都網(wǎng)站制作市場(chǎng)上長(zhǎng)期立足的相關(guān)介紹。

Sass 有兩種語法規(guī)則(syntaxes),目前新的語法規(guī)則（從 Sass 3開始）被稱為 “SCSS”( 時(shí)髦的css（Sassy CSS）),它是css3語法的的拓展級(jí)，就是說每一個(gè)語法正確的CSS3文件也是合法的SCSS文件，SCSS文件使用.scss作為拓展名。第二種語法別成為縮進(jìn)語法（或者 Sass），它受到了Haml的簡(jiǎn)潔精煉的啟發(fā)，它是為了人們可以用和css相近的但是更精簡(jiǎn)的方式來書寫css而誕生的。它沒有括號(hào)，分號(hào)，它使用 行縮進(jìn) 的方式來指定css 塊，雖然sass不是最原始的語法，但是縮進(jìn)語法將繼續(xù)被支持，在縮進(jìn)語法的文件以 .sass 為拓展名。

注釋

有三種形式：

（1）//comment：該注釋只是在.scss源文件中有，編譯后的css文件中沒有。

（2）/!/：重要注釋，任何style的css文件中都會(huì)有，一般放置css文件版權(quán)說明等信息。

（3）//：該注釋在compressed的style的css中沒有，其他style的css文件都會(huì)含有。

Quick Start

installation

build

1.切換到.scss文件所在目錄

命令行下切換到代碼文件夾目錄（如Z:\），假設(shè)有文件test.scss文件，里面內(nèi)容如下：（SASS完全支持css語法）

h1{

font-size:17px;

}

h2{

font-size:18px;

}

2.編譯scss文件為css文件

運(yùn)行命令：sass --style compressed test.scss test.css，即可生成壓縮版的css文件，并且命名為test.css。幾點(diǎn)說明：

（1）--style 后面可以有四個(gè)參數(shù)可選，分別為expanded、nested、compact、compressed，分別選用不同參數(shù)的效果可以自己嘗試體驗(yàn)。

（2）test.scss和test.css文件目錄可以自定義，例如把Z盤sass目錄下的test.scss文件編譯為壓縮版的文件，并放置在Z盤css目錄下，那么命令即：sass --style compressed z:\sass\test.scss z:\css\test.css

（3）開發(fā)過程中，只需要修改scss文件，然后編譯；前端頁面只需要引用相應(yīng)的css文件即可。

3.偵聽文件和文件夾

如果希望某一個(gè)scss文件或者相應(yīng)的文件夾下面文件修改后，自動(dòng)進(jìn)行編譯，那么可以使用偵聽命令。

（1）偵聽文件：

sass --watch --style compressed test.scss:test.css

當(dāng)test.scss文件有修改后，會(huì)自動(dòng)編譯為test.css，并且是compressed的。

（2）偵聽文件夾：

sass --watch --style compressed sass:css

當(dāng)sass文件夾下.scss文件有修改的時(shí)候，會(huì)自動(dòng)編譯為與sass中文件同名的css文件。

備注：

（1）注意源文件和目標(biāo)文件之間是冒號(hào)，與編譯命令中為空格不同。

（2）生成的map文件可以查找source map文件的作用。

Webpack

Webpack中也內(nèi)置了sass-loader，通過簡(jiǎn)單的配置既可以使用。不過需要注意的是，Webpack的sass-loader還是依賴于node-sass以及sass(gem)，所以如果安裝sass-loader報(bào)錯(cuò)可以先嘗試安裝sass。

變量與選擇器

變量

定義

變量的定義一般以$開頭，某個(gè)變量的作用域僅限于他們定義的層級(jí)以及子層級(jí)。如果變量是定義在所有嵌套選擇器之外的，那么他們可以在各處被調(diào)用。

$color1:#aeaeae;

.div1{

background-color:$color1;

}

編譯后：

.div1 {

background-color: #aeaeae;

}

/*# sourceMappingURL=test.css.map */

如果希望某個(gè)在子選擇器中定義的變量能夠成為全局變量，可以使用!global關(guān)鍵字：

#main {

$width: 5em !global;

width: $width;

}

#sidebar {

width: $width;

}

嵌套引用

嵌套引用在其他編程語言中即是字符串插值，需要用#{}進(jìn)行包裹：

$left:left;

.div1{

border-#{$left}-width:5px;

}

變量計(jì)算

Sass中也是支持對(duì)于變量進(jìn)行簡(jiǎn)單的計(jì)算：

$left:20px;

.div1{

margin-left:$left+12px;

}

變量可以支持計(jì)算的類型，還是比較多的：

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: {

color: red;

}

}

注意，border后面必須加上冒號(hào)。

父元素引用

在嵌套的子層級(jí)中，允許使用&引用父元素：

.div1{

&:hover{

cursor: hand;

}

}

代碼重用

繼承

SASS允許一個(gè)選擇器，繼承另一個(gè)選擇器。比如，現(xiàn)有class1：

.class1{

font-size:19px;

}

.class2{

@extend .class1;

color:black;

}

注意：如果在class2后面有設(shè)置了class1的屬性，那么也會(huì)影響class2，如下：

.class1{

font-size:19px;

}

.class2{

@extend .class1;

color:black;

}

.class1{

font-weight:bold;

}

由此可以看出Scss也是遞歸編譯的。

引用外部css文件（Partials）

有時(shí)網(wǎng)站開發(fā)中，網(wǎng)頁的不同部分會(huì)分成多個(gè)文件來寫樣式，或者引用通用的一些樣式，那么可以使用@import。

@import "_test1.scss";

@import "_test2.scss";

@import "_test3.scss";

Mixin&include

Mixin有點(diǎn)像C語言的宏（macro），是可以重用的代碼塊。

使用@mixin命令，定義一個(gè)代碼塊。

@mixin left {

float: left;

margin-left: 10px;

}

使用@include命令，調(diào)用這個(gè)mixin。

div {

@include left;

}

參數(shù)與缺省值

?邊距設(shè)置

@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);

}

?瀏覽器前綴設(shè)置設(shè)置

下面是一個(gè)mixin的實(shí)例，用來生成瀏覽器前綴。

@mixin rounded($vert, $horz, $radius: 10px) {

border-#{$vert}-#{$horz}-radius: $radius;

-moz-border-radius-#{$vert}#{$horz}: $radius;

-webkit-border-#{$vert}-#{$horz}-radius: $radius;

}

使用的時(shí)候，可以像下面這樣調(diào)用：

#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;

}

循環(huán)語句

SASS支持for循環(huán)：

@for $i from 1 to 10 {

.border-#{$i} {

border: #{$i}px solid blue;

}

}

也支持while循環(huán)：

$i: 6;

@while $i > 0 {

.item-#{$i} { width: 2em * $i; }

$i: $i - 2;

}

each命令，作用與for類似：

@each $member in a, b, c, d {

.#{$member} {

background-image: src="/upload/pic22/#{$member}.jpg");

}

}

函數(shù)

Sass允許用戶自定義函數(shù)，原型如下所示：

@function double($n) {

@return $n * 2;

}

#sidebar {

width: double(5px);

}

顏色函數(shù)

SASS提供了一些內(nèi)置的顏色函數(shù)，以便生成系列顏色。

lighten(#cc3, 10%) // #d6d65c

darken(#cc3, 10%) // #a3a329

grayscale(#cc3) // #808080

complement(#cc3) // #33c

以上就是成都創(chuàng)新互聯(lián)的網(wǎng)站開發(fā)工程師為大家?guī)淼年P(guān)于scss語句使用以及相關(guān)內(nèi)容的推薦，希望大家能夠喜歡。創(chuàng)新互聯(lián)以人為本，用心每個(gè)細(xì)節(jié)，全心全意為您提供互聯(lián)網(wǎng)相關(guān)解決方案。

新聞名稱：創(chuàng)新互聯(lián)網(wǎng)站開發(fā)為您帶來Scss常用語法講解
網(wǎng)頁鏈接：http://www.muchs.cn/news28/322528.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、App設(shè)計(jì)、網(wǎng)站制作、網(wǎng)站策劃、動(dòng)態(tài)網(wǎng)站、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)