使用Sass的方法是什么

這篇文章主要介紹了使用Sass的方法是什么，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

蠡縣網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,蠡縣網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為蠡縣成百上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營銷網(wǎng)站建設(shè)要多少錢，請找那個售后服務(wù)好的蠡縣做網(wǎng)站的公司定做！

對于一個網(wǎng)頁設(shè)計(jì)的新手來說，可能聽說過“Sass”這個詞。但卻不確定Sass的作用以及是否可以使用它，

使用Sass的方法是什么

簡而言之，Sass是一個CSS預(yù)處理器，它將特殊功能（如變量，嵌套規(guī)則和mixins（有時稱為語法糖））添加到常規(guī)CSS中。目的是使編碼過程更簡單，更有效。讓我們更詳細(xì)地探討一下。

什么是CSS預(yù)處理器？

CSS預(yù)處理器是一種腳本語言，它通過允許開發(fā)人員用一種語言編寫代碼然后將其編譯成CSS來擴(kuò)展CSS。Sass可能是最受歡迎的預(yù)處理器，但其他常見的例子包括Less和Stylus。

什么是SASS？

Sass（Syntactically Awesome Style Sheets）是CSS的擴(kuò)展，使您可以使用變量，嵌套規(guī)則，內(nèi)聯(lián)導(dǎo)入等內(nèi)容。它還有助于保持組織有序，并允許您更快地創(chuàng)建樣式表。

Sass與所有版本的CSS兼容。使用它的唯一要求是必須安裝Ruby。

如何使用Sass？

句法：

Sass包含兩個語法選項(xiàng)：

1、SCSS (Sassy CSS)：使用.scss文件擴(kuò)展名，完全符合CSS語法

2、Indented (簡單地稱為 'Sass')：使用.sass文件擴(kuò)展名和縮進(jìn)而不是括號; 它不完全符合CSS語法，但編寫起來更快

請注意，可以使用sass-convert命令將文件從一種語法轉(zhuǎn)換為另一種語法。

變量

與其他編程語言一樣，Sass允許使用可存儲可在整個樣式表中使用的信息的變量。例如，您可以將顏色值存儲在文件頂部的變量中，然后在設(shè)置元素的顏色時使用此變量。這使您可以快速更改顏色，而無需單獨(dú)修改每一行。

例如：

$font-stack:    Helvetica, sans-serif;
$primary-color: red;

body {
  font: 100% $font-stack;
  color: $primary-color;}

將生成以下CSS：

body {
  font: 100% Helvetica, sans-serif;
  color: red;
}

嵌套

嵌套是一把雙刃劍。雖然它提供了一種減少需要編寫的代碼量的絕佳方法，但如果不仔細(xì)執(zhí)行，它也會導(dǎo)致過度限定的CSS。我們的想法是以一種模仿HTML層次結(jié)構(gòu)的方式嵌套CSS選擇器。

以下顯示了使用嵌套的基本導(dǎo)航樣式：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }}

CSS輸出如下：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Partials

Partials是較小的Sass文件，可以導(dǎo)入到其他Sass文件中。將partials視為代碼片段。使用這些代碼片段，我們的CSS現(xiàn)在可以模塊化并且更易于維護(hù)。部分通過使用前導(dǎo)下劃線命名為_partial.scss來指定。

導(dǎo)入（Import）

使用局部模板，在@import指令，可以導(dǎo)入你的部分文件到當(dāng)前文件，建立一個單一的CSS文件。請注意將為每個導(dǎo)入生成的HTTP請求使用的導(dǎo)入數(shù)量。

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;}

// basefile.scss
@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

相應(yīng)的CSS輸出：

html, body, ul, ol {
  margin: 0;
  padding: 0;
}
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

注意：導(dǎo)入partials時，您不需要包含文件擴(kuò)展名或下劃線。

mixins

使用預(yù)處理器的一個優(yōu)點(diǎn)是能夠采用復(fù)雜，冗長的代碼并簡化它。這就是mixins派上用場的地方！

例如，如果您需要包含供應(yīng)商前綴，則可以使用mixin。看一下border-radius的這個例子：

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}
.box { 
    @include border-radius(10px); 
}

注意頂部的@mixin指令。它的名稱為border-radius，并使用變量$ radius作為參數(shù)。此變量用于設(shè)置每個元素的半徑值。

稍后，調(diào)用@include指令以及mixin名稱（border-radius）和參數(shù)（10px）。因此.box {@include border-radius（10px）; }。

生成以下CSS：

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

擴(kuò)展/繼承

該@extend指令被稱為是Sass的最強(qiáng)大的功能之一?？吹剿谛袆雍?，很明顯為什么。

我們的想法是，使用此指令，您不必在HTML元素上包含多個類名，并且可以保持代碼干燥。您的選擇器可以繼承其他選擇器的樣式，然后在需要時輕松擴(kuò)展?，F(xiàn)在這很強(qiáng)大。

Sass的優(yōu)點(diǎn)：

能夠在CSS中執(zhí)行計(jì)算，允許我們執(zhí)行更多的操作，例如將像素值轉(zhuǎn)換為百分比。我們還可以訪問標(biāo)準(zhǔn)數(shù)學(xué)函數(shù)，如加法，減法，乘法和除法。當(dāng)然，可以組合這些功能來創(chuàng)建復(fù)雜的計(jì)算。

此外，Sass還包含一些內(nèi)置函數(shù)來幫助操作數(shù)字。像percentage（），floor（）和round（）這樣的函數(shù)就是一些例子。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享使用Sass的方法是什么內(nèi)容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來學(xué)習(xí)!

本文名稱：使用Sass的方法是什么
鏈接地址：http://bm7419.com/article36/ipocpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、品牌網(wǎng)站建設(shè)、、網(wǎng)站營銷、營銷型網(wǎng)站建設(shè)、虛擬主機(jī)

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

猜你還喜歡下面的內(nèi)容