<tbody id="fuft6"><noscript id="fuft6"><video id="fuft6"></video></noscript></tbody>
    <tbody id="fuft6"><noscript id="fuft6"></noscript></tbody>
    <em id="fuft6"><acronym id="fuft6"></acronym></em>
          <button id="fuft6"><acronym id="fuft6"><u id="fuft6"></u></acronym></button>
          首頁技術文章正文

          Sass怎樣進行除(/)運算?

          更新時間:2021-09-30 來源:黑馬程序員 瀏覽量:

          IT培訓班


          Sass支持數字的加(+)、減(-)、乘()、除(/)和取余(%)等運算,如果必要時會在不同單位間進行值的轉換。示例代碼如下。

          p { width: 1in + 8pt;
          }

          上述代碼編譯后的結果如下。

          p { width: 1.111in; 
          }

          上述代碼中,將8pt轉換為lin后的值為1.111in。其中,pt全稱為point,是一個自然界的長度單位,1in = 72pt。

          在學習了不同單位間轉換值之后,下面以“/”運算符號為例講解Sass元素的內容。

          “/”符號在CSS中通常起到分隔數字的用途,而在Sass中同時也賦予了“/”除法運算的功能,但兩者并不會沖突。也就是說,如果“/”在Sass中把兩個數字分隔,編譯后的CSS文件中也是同樣的作用。

          下面通過代碼演示“/”符號的使用方式。

          p {
           font: 10px/8px;
           $width: 1000px;
           width: $width/2;
           height: (500px/2); 
           margin-left: 5px + 8px/2px; 
          }

          上述代碼編譯后的結果如下。

          p {
           font: 10px/8px;
           width: 500px;
           height: 250px;
           margin-left: 9px; 
          }

          上述代碼中,font編譯后的結果不變,這是因為沒有被圓括號包裹;width編譯后的結果為500px,這是$width變量除以2計算后的結果,因為$width變量的值提前定義為1000px;height編譯后的結果為250px,這是被圓括號包裹的500px/2計算后的結果;margin-left編譯后的結果為9px;這是因為“8px/2px”作為了算數表達式的一部分,并且計算后結果為4px,然后,再通過“+”符號與前一個值進行加法運算,所以最終得到的結果為9px。

          如果需要使用變量,同時又要確?!?”不做除法運算而是完整地編譯到CSS文件中,只需要用#{}插值語句將變量包裹。示例代碼如下。

          p {
           $font-size: 12px;
           $line-height: 30px;
           font: #{$font-size}/#{$line-height};
          }

          上述代碼編譯后的結果如下。

          p {
           font: 12px/30px;
           }

          除了數字運算之外,關系運算符<、>、<=、>=也可以用于數字的運算,所有數據類型均支持相等(==)或不等(!=)運算。此外,每種數據類型也有其各自支持的運算方式。關于更多運算符號的使用,讀者可以參考Sass官網進行學習。







          猜你喜歡:

          什么是Sass?Sass的優勢有哪些?

          Sass語言怎樣聲明變量和引用變量?

          什么是數據庫技術?數據庫技術簡介

          Scala算術操作符重載怎樣使用?

          黑馬程序員web前端與移動開發課程

          在線咨詢 我要報名
          和我們在線交談!

          黄色网站片

          <tbody id="fuft6"><noscript id="fuft6"><video id="fuft6"></video></noscript></tbody>
            <tbody id="fuft6"><noscript id="fuft6"></noscript></tbody>
            <em id="fuft6"><acronym id="fuft6"></acronym></em>
                  <button id="fuft6"><acronym id="fuft6"><u id="fuft6"></u></acronym></button>