CSS、Sass、Scss，以及sass和scss的區(qū)別

caozhijian 發(fā)布于2019-08-30 11:16 / 3648人閱讀

摘要：即元素脫離文檔流的布局，在頁面的任意位置顯示絕對(duì)定位脫離文檔流的布局，遺留下來的空間由后面的元素填充。相對(duì)定位不脫離文檔流的布局，只改變自身的位置，在文檔流原先的位置遺留空白區(qū)域。

1、描述


CSS 指層疊樣式表 (Cascading Style Sheets)


Sass (Syntactically Awesome StyleSheets)，是由buby語言編寫的一款css預(yù)處理語言，和html一樣有嚴(yán)格的縮進(jìn)風(fēng)格，和css編寫規(guī)范有著很大的出入，是不使用花括號(hào)和分號(hào)的，所以不被廣為接受。 Sass 是一款強(qiáng)化 CSS 的輔助工具，是對(duì) CSS 的擴(kuò)展，它在 CSS 語法的基礎(chǔ)上增加了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、繼承(extend)、導(dǎo)入 (inline imports) 等高級(jí)功能，這些拓展令 CSS 更加強(qiáng)大與優(yōu)雅。使用 Sass 以及 Sass 的樣式庫（如 Compass）有助于更好地組織管理樣式文件，以及更高效地開發(fā)項(xiàng)目， 其后綴是.sass。


SCSS (Sassy CSS)，一款css預(yù)處理語言，SCSS 是 Sass 3 引入新的語法，其語法完全兼容 CSS3，并且繼承了 Sass 的強(qiáng)大功能。也就是說，任何標(biāo)準(zhǔn)的 CSS3 樣式表都是具有相同語義的有效的 SCSS 文件。SCSS 需要使用分號(hào)和花括號(hào)而不是換行和縮進(jìn)。SCSS 對(duì)空白符號(hào)不敏感，其實(shí)就和css3語法一樣，其后綴名是分別為 .scss。

2、css

以下是部門常用知識(shí)點(diǎn)：

CSS的書寫方式

    行內(nèi)式：將CSS代碼書寫在HTML標(biāo)簽的style屬性中。style是一個(gè)通用屬性，每一個(gè)標(biāo)簽里面都擁有這個(gè)屬性，規(guī)則：
                                                        <標(biāo)簽名  style=”屬性:值;屬性:值;”>
    嵌入式：將CSS代碼嵌入到HTML文件中，嵌入式是通過HTML中的
   外鏈?zhǔn)剑簩懸?css擴(kuò)展名的文件，然后在標(biāo)簽中使用標(biāo)簽，將css文件鏈接到html文件中，規(guī)則：
                                                             <標(biāo)簽名  style=”屬性:值;屬性:值;”>

選擇器

      元素選擇器、id選擇器、類選擇器、
      屬性選擇器(如為帶有 title 屬性的所有元素設(shè)置樣式 [title] {somestyles} )、
      屬性和值選擇器(如為帶有 title="hello title" 的所有元素設(shè)置樣式 [title=W3School] {somestyles} )、
      派生選擇器(通過依據(jù)元素在其位置的上下文關(guān)系來定義樣式)，有三種
          后代選擇器：    空格隔開;
          子元素選擇器：  >隔開，只能選擇作為某元素子元素的元素;
          相鄰兄弟選擇器：選擇緊接在一元素后的元素，且二者有相同父元素,
                         如設(shè)置緊接 h1 后出現(xiàn)的 p 的字體顏色：h1 + p {color: red;};
          注1：.a,.b該逗號(hào)表示存在其中一個(gè)類的元素就設(shè)置，多元選擇；
          注1：.a.b沒有空格表示同時(shí)擁有兩個(gè)類的元素。

盒子模型

       所有HTML元素可以看作盒子，CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周圍的HTML元素，
       它包括：margin(外邊距)、border(邊框)、padding(內(nèi)邊距)、content(內(nèi)容)
       盒模型允許我們?cè)谄渌睾椭車剡吙蛑g的空間放置元素。

定位

      Position屬性：規(guī)定元素的定位類型。即元素脫離文檔流的布局，在頁面的任意位置顯示
      absolute： 絕對(duì)定位；脫離文檔流的布局，遺留下來的空間由后面的元素填充。
                 定位的起始位置為最近的父元素(postion不為static)，否則為Body文檔本身。
      relative ：相對(duì)定位；不脫離文檔流的布局，只改變自身的位置，在文檔流原先的位置遺留空白區(qū)域。
                 定位的起始位置為此元素原先在文檔流的位置。
      fixed ：固定定位；類似于absolute，但不隨著滾動(dòng)條的移動(dòng)而改變位置。
      static ：默認(rèn)值；默認(rèn)布局.
      輔助屬性：position屬性只是使元素脫離文檔流，要想此元素能按照希望的位置顯示，
               需要使用下面的屬性(position:static不支持這些)：
                ①left ： 表示向元素的左邊插入多少像素，使元素向右移動(dòng)多少像素。
                ②right ：表示向元素的右邊插入多少像素，使元素向左移動(dòng)多少像素。
                ③top ：表示向元素的上方插入多少像素，使元素向下移動(dòng)多少像素。
                ④bottom ：表示向元素的下方插入多少像素，使元素向上移動(dòng)多少像素。
                注：上面屬性的值可以為負(fù)，單位：px 。

布局

(省略......)

3、sass、scss、和css的關(guān)系 css預(yù)處理器

css預(yù)處理器是用一種專門的語言，進(jìn)行網(wǎng)頁的樣式設(shè)計(jì)，之后在被編譯為正常的css文件，以供項(xiàng)目使用。使用css預(yù)處理語言的好處：是css更加簡(jiǎn)潔、方便修改、可讀性強(qiáng)、適應(yīng)新強(qiáng)并且更易于代碼的維護(hù)。

css和sass的關(guān)系

sass是由buby語言編寫的一款css預(yù)處理語言，和html一樣有嚴(yán)格的縮進(jìn)風(fēng)格，和css編寫規(guī)范有著很大的出入，是不使用花括號(hào)和分號(hào)的，所以不被廣為接受。

scss和css的關(guān)系

 SCSS 和 CSS 寫法無差別，這也是 Sass 后來越來越受大眾喜歡原因之一。簡(jiǎn)單點(diǎn)說，把你現(xiàn)有的“.css”文件直接修改成“.scss”即可使用。

sass和scss的關(guān)系

sass和scss其實(shí)是一樣的css預(yù)處理語言，SCSS 是 Sass 3 引入新的語法，其后綴名是分別為 .sass和.scss兩種。
SASS版本3.0之前的后綴名為.sass，而版本3.0之后的后綴名.scss。
兩者是有不同的，繼sass之后scss的編寫規(guī)范基本和css一致，sass時(shí)代是有嚴(yán)格的縮進(jìn)規(guī)范并且沒有‘{}’和‘；’。
而scss則和css的規(guī)范是一致的。

示例代碼

        // sass
        #sidebar
          width: 30%
          background-color: #faa
        // scss
        #sidebar {
          width: 30%;
          background-color: #faa;
        }

4、sass

直接跳過

5、scss scss 注釋

        多行注釋?-?這些使用?/**/?寫入。多行注釋都保留在CSS輸出。
        單行注釋?-?這些是使用 // 跟著注釋。單行注釋不會(huì)保留在CSS輸出。

變量

$ 符號(hào)來標(biāo)識(shí)變量；把反復(fù)使用的css屬性值定義成變量；

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color; // 變量中可存在變量

$link-color: blue;
a {
  color: $link_color; // 中劃線和下劃線等價(jià)，包括對(duì)混合器和Sass函數(shù)的命名
}

$side : left;
.rounded {
  border-#{$side}-radius: 5px; // 如果變量需要鑲嵌在字符串之中，就必須需要寫在#{}之中。
}

$nav-color: #F90;// 當(dāng)前樣式表都可以使用
nav {
  $width: 100px; // 只有nav{}里面才可以使用，當(dāng)前樣式表其他地方可以重復(fù)定義和使用
  width: $width;
  color: $nav-color;
}
//編譯后
nav {
  width: 100px;
  color: #F90;
}

嵌套

選擇器嵌套
#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}
 /* 編譯后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

屬性也可以嵌套，比如border-color屬性，可以寫成：
p {
    border: {   // 注意，border后面必須加上冒號(hào)。
        color: red;
    }
}

在嵌套的代碼塊內(nèi)，可以使用&引用父元素。比如a:hover偽類，可以寫成
a {
    &:hover { color: #ffb3ff; } }

計(jì)算功能

所有數(shù)據(jù)類型均支持相等運(yùn)算 == 或 !=，此外，每種數(shù)據(jù)類型也有其各自支持的運(yùn)算方式。

數(shù)字運(yùn)算: 支持?jǐn)?shù)字的加減乘除、取整等運(yùn)算 (+, -, *, /, %)
$var: 20px;
body {
  margin: (14px/2);
  top: 50px + 100px;
  right: $var * 10%;}

字符串運(yùn)算： + 可用于連接字符串
注意，如果有引號(hào)字符串（位于 + 左側(cè)）連接無引號(hào)字符串，運(yùn)算結(jié)果是有引號(hào)的，
相反，無引號(hào)字符串（位于 + 左側(cè)）連接有引號(hào)字符串，運(yùn)算結(jié)果則沒有引號(hào)
p {cursor: e + -resize;} //編譯后 p {cursor: e-resize; }
p:before { 
    content: "Foo " + Bar;  
    font-family: sans- + "serif";}
// 編譯為
p:before {
  content: "Foo Bar";
  font-family: sans-serif; }

代碼的重用 繼承

繼承是基于類class的（有時(shí)是基于其他類型的選擇器）
允許一個(gè)選擇器，繼承另一個(gè)選擇器。比如，現(xiàn)有class1：
.class1 {
border: 1px solid #ffffd;}

// class2要繼承class1，就要使用@extend命令：

.class2 {
     @extend .class1;
     font-size:120%;
 }

混合器 Mixin

避免不停地重復(fù)一段樣式

   // 使用@mixin命令，定義一個(gè)代碼塊。
　　@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}
    //使用@include命令，調(diào)用這個(gè)mixin。
　　div {
　　　　@include left;
　　}
　　
　　// mixin的強(qiáng)大之處，在于可以指定參數(shù)和缺省值。
　　@mixin left($value: 10px) {
　　    float: left;
　　    margin-right: $value;
　　}
    // 使用的時(shí)候，根據(jù)需要加入?yún)?shù)：
　　div {
　　　　@include left(20px);
　　}

插入文件

Sass 拓展了 @import 的功能，允許其導(dǎo)入 SCSS 或 Sass 文件。被導(dǎo)入的文件將合并編譯到同一個(gè) CSS 文件中，另外，被導(dǎo)入的文件中所包含的變量或者混合指令 (mixin) 都可以在導(dǎo)入的文件中使用。

    @import "foo.scss"; //都會(huì)導(dǎo)入文件 foo.scss
    @import "foo"; //都會(huì)導(dǎo)入文件 foo.scss
    @import "http://foo.com/bar";  // 插入外部文件
    @import "foo.css"; // 等同于css的import命令。

高級(jí)用法

比如控制指令，條件語句、循環(huán)語句、自定義函數(shù)等，這部分就不列出來了。

scss總結(jié)

這里只是簡(jiǎn)單介紹 scss 最基本部分,使用 scss 可以編寫清晰、無冗余、語義化的 css。變量是 scss 提供的最基本的工具。通過變量可以讓獨(dú)立的 css 值變得可重用，無論是在一條多帶帶的規(guī)則范圍內(nèi)還是在整個(gè)樣式表中。
變量、混合器的命名甚至 scss 的文件名，可以互換通用_和-。
同樣基礎(chǔ)的是 scss 的嵌套機(jī)制。嵌套允許css規(guī)則內(nèi)嵌套css規(guī)則，減少重復(fù)編寫常用的選擇器，同時(shí)讓樣式表的結(jié)構(gòu)一眼望去更加清晰。scss同時(shí)提供了特殊的父選擇器標(biāo)識(shí)符 & ，通過它可以構(gòu)造出更高效的嵌套。
混合器允許用戶編寫語義化樣式的同時(shí)避免視覺層面上樣式的重復(fù)。使用混合器減少重復(fù)，使用混合器讓你的css變得更加可維護(hù)和語義化。
與混合器相輔相成的選擇器繼承。繼承允許你聲明類之間語義化的關(guān)系，通過這些關(guān)系可以保持你的css的整潔和可維護(hù)性。
樣式導(dǎo)入，scss 的另一個(gè)重要特性。通過樣式導(dǎo)入可以把分散在多個(gè)sass文件中的內(nèi)容合并生成到一個(gè)css文件，避免了項(xiàng)目中有大量的css文件通過原生的css @import帶來的性能問題。通過嵌套導(dǎo)入和默認(rèn)變量值，導(dǎo)入可以構(gòu)建更強(qiáng)有力的、可定制的樣式。