SASS允许使用颜色分量和算术运算,任何颜色表达式都返回SassScript颜色值。
下面的示例演示了在SCSS文件中使用颜色操作:
<html> <head> <title>Color 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"> <h3>This is Example of Sass Color Operations</h3> <p>SASS stands for Syntactically Awesome Stylesheet..</p> </div> </body> </html>
接下来,创建文件style.scss。
$color1: #333399; $color2: #CC3399; p{ color: $color1 + $color2; }
您可以通过使用以下命令让SASS查看文件并在SASS文件更改时更新CSS:
sass --watch C:rubylibsassstyle.scss:style.css
接下来执行上面的命令,它将自动创建style.css文件用下面的代码:
p { color: #ff66ff; }
让我们执行以下步骤,看看上面的代码如何工作:
将上面的html代码保存在color_operations.html文件中。
在浏览器中打开此HTML文件,将显示如下输出。
在本章中,我们将学习类型函数。它们用于确定值的类型。Less类型函数一共有十种,你可以通过文中的表格了解这些类型函数的使用。...
CSS3已经完全向后兼容,所以你就不必改变现有的设计。浏览器一般情况下都会支持CSS2。 CSS3 模块 CSS3被拆分为"模块"。旧规范已...
定义和用法HTML5 object标签定义一个嵌入的对象。请使用此元素向您的 XHTML 页面添加多媒体。此元素运行您规定插入 HTML 文档中...