Sass
2018-06-27 09:07:57来源:未知 阅读 ()
注:配合查看:Sass和Compass设计师指南
Sass是基于Ruby编程语言的命令行工具。要使用它就必须先在电脑上安装Ruby,Ruby的安装可以通过网址:http://rubyinstaller.org/downloads/,下载最新版Ruby进行安装,安装完后可以使用ruby -v进行验证是否安装成功
Sass安装
通过使用Ruby自带的 RubyGems的系统来进行安装
$ gem install sass
使用sass -v验证是否安装成功
Sass使用
sass test.scss
可以在命令行显示.scss文件转化的css代码
sass test.scss test.css
可以将命令行显示的结果保存成文件
Sass提供的编译风格:
编译风格的使用:
sass --style compressed test.scss test.css
sass --watch input.scss:output.css
监听目录
sass --watch app/sass:public/stylesheets
sass语法
基本用法
1、变量
$blue : #1875e7; div { color : $blue; }
若变量需嵌套在字符串中,就必须写在#{}中
$side : left; .rounded { border-#{$side}-radius : 5px; }
2、计算功能
body { margin : (14px/2); top : 50px + 100px; right: $var * 10%; }
3、嵌套
div h1 { color: red; }
可以写成:
div { h1 { color: red; } }
属性也可以嵌套:
p { border: { color: red; } }
注:border后面必须加冒号
在嵌套的代码块内,可以使用&引用父元素,例:a:hover可以写成
a { &:hover{ color: #ffb3ff;} }
4、注释
代码重用
1、继承
SASS允许一个选择器继承另一个选择器。例:
.class1 { border: 1px solid #ddd; }
class2要继承class1就要使用@extend命令
.class2 { @extend .class1; font-size: 100%; }
2、Mixin
@mixin left{ float: left; margin-left: 10px; }
使用@include命令,调用这个宏
div { @include left; }
mixin的强大之处在于可以指定参数和缺省值
@mixin left($value: 10px) { float: left; margin-left: $value; }
使用时根据情况输入参数
div { @include left(20px); }
示例:
@mixin rounded($vert, $horz, $radius: 10px) { border-#{$vert}-#{$horz}-radius: $radius; -moz-border-radius-#{$vert}#{$horz}: $radius; -webkit-border-#{$vert}-#{$horz}-radius: $radius; }
注:Firefox支持的厂商前缀写法是非标准的-moz-border-radius-topleft,而不是-moz-border-top-left-radius
调用
#navbar li { @include rounded(top, left); } #footer { @include rounded(top, left, 5px); }
3、颜色函数
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
4、插入文件
高级用法
1、条件语句
@if可以用来判断:
p { @if 1 + 1 == 2 {border: 1px solid #ddd; } @if 5 < 2 {border: 2px dotted #ccc; } }
以及@else配套使用
@if lightness($color) > 30% { background-color: #000; } @else { background-color: #fff; }
2、循环语句
for循环
@for $i from 1 to 10 { .border-#{$i} { border: #{$i}px solid blue; } }
while循环
$i: 6; @while $i > 0 { .item-#{$i} {width: 2em * $i; } $i: $i - 2; }
each循环
@each $member in a, b, c, d { .#{$member} { background-image: url("test.jpg"); } }
3、自定义函数
@function double($n) { @return $n * 2; } #sidebar { width: double(2px); }
注:本文参考自:http://www.ruanyifeng.com/blog/2012/06/sass.html
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- CSS选择器的优先级 2020-05-18
- sass内置函数 2020-03-29
- sass常见的基本数据类型+加减乘除基本运算 2020-03-29
- sass基础语法--变量和引用+变量作用域+import 2020-03-29
- Sass环境安装--windows版sublime插件 2020-03-29
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash