Sass 數(shù)字運(yùn)算符

2018-12-30 18:39 更新

描述

SASS允許諸如加法,減法,乘法和除法的數(shù)學(xué)運(yùn)算。您不能使用不兼容的單位,如px * px或添加數(shù)字與px和em導(dǎo)致生成無(wú)效的CSS。因此,如果在CSS中使用無(wú)效單位,SASS將顯示錯(cuò)誤。 SASS支持關(guān)系運(yùn)算符,如<,>,<=,> =和等于運(yùn)算符= =,!=。

除法 和 /

SASS允許對(duì)數(shù)字進(jìn)行除法運(yùn)算(/),就像在普通CSS中一樣。您可以在三種情況下使用除法(/)操作

  • 如果值存儲(chǔ)在變量中或由函數(shù)返回。

  • 如果圓括號(hào)在列表之外,值在里面,在這種情況下,值也將被括號(hào)括起來(lái)。

  • 如果value是算術(shù)表達(dá)式的一部分。

減法,負(fù)數(shù)和 -

使用SASS可以執(zhí)行一些操作,例如減去數(shù)字(10px - 5px),負(fù)數(shù)(-5),一元取反運(yùn)算符( - $ myval)或使用標(biāo)識(shí)符(font-size)。在某些情況下,這些是有用的:

  • 你可以使用空格兩邊 - 當(dāng)執(zhí)行數(shù)字減法

  • 你可以在 - 之前使用空格,但不能在負(fù)數(shù)之后或一元否定

  • 你可以在用空格分隔的括號(hào)內(nèi)包含一元否定(5px( - $ myval))

有一些與 - 相關(guān)的意義,如下所示:

  • 它可以在標(biāo)識(shí)符中使用,如font-size和Sass只允許有效的標(biāo)識(shí)符。

  • 它可以用于兩個(gè)數(shù)字,沒(méi)有空格。裝置10-5類(lèi)似于10-5。

  • 它可以用作負(fù)數(shù)(-5)的開(kāi)始。

  • 它可以在不考慮空間的情況下使用,如5 - $ myval類(lèi)似于5 - $ myval。

  • 它可以用作一元否定運(yùn)算符( - $ myval)。

例子

下面的例子演示了在SCSS文件中使用數(shù)字操作:

<html>
<head>
   <title>Number Operations</title>
   <link rel="stylesheet" type="text/css" href="style.css" />
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="container">
   <p class="para1">SASS stands for Syntactically Awesome Stylesheet..</p>
   <h2>Hello...Welcome to Sass</h2>
   <h3>Hello...Welcome to Sass</h3>
   <p class="para2">Hello...Welcome to Sass</p>
   </div>
</body>
</html>

接下來(lái),創(chuàng)建文件style.scss。

style.scss

$size: 25px;
h2{
   font-size: $size + 5;
}
h3{
   font-size: $size / 5;
}
.para1 {
   font-size: $size * 1.5;
}
.para2 {
   font-size: $size - 10;
}

您可以通過(guò)使用以下命令讓SASS查看文件,并在SASS文件更改時(shí)更新CSS:

sass --watch C:\ruby\lib\sass\style.scss:style.css

接下來(lái)執(zhí)行上面的命令,它將自動(dòng)創(chuàng)建style.css文件用下面的代碼:

style.css

h2 {
  font-size: 30px;
}
h3 {
  font-size: 5px;
}
.para1 {
  font-size: 37.5px;
}
.para2 {
  font-size: 15px;
}

輸出

讓我們執(zhí)行以下步驟,看看上面的代碼如何工作:

  • 將以上html代碼保存在number_operations.html文件中。

  • 在瀏覽器中打開(kāi)此HTML文件,將顯示如下輸出。

Sass Operations
以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)