Sass

2018-06-24 00:32:17来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

:配合查看: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提供的编译风格:

1、nested : 嵌套缩进的CSS代码,它是默认值
2、expanded : 没有缩进的、扩展的CSS代码
3、compact :简洁格式的CSS代码
4、compressed : 压缩后的CSS代码

编译风格的使用:

sass  --style compressed test.scss test.css
让Sass监听某个文件或目录,一旦源文件改动,自动生成编译后的版本
监听文件
sass --watch input.scss:output.css

 监听目录

sass --watch app/sass:public/stylesheets

sass语法

1、老版本.sass后缀的语法
通过tab键缩进的一种语法规则,并且要求非常严格,还不带有任何大括号和分号,容易出错,不太被接受(Python程序员应该会很喜欢)
2、.scss后缀的语法
sass的新语法格式,外形与CSS几乎一模一样,代码都包裹在一对大括号里,末尾结束处都有一个分号

基本用法

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、注释

标准的CSS注释/* */会被保留到编译后的CSS文件中
单行注释//,只保留在SASS文件中,编译后被删除
在/* 后加个!,表示是重要注释,即使使用压缩模式编译,也会保留这行注释,可用于声明版权信息
/* !
    重要注释
*/

 代码重用

1、继承

SASS允许一个选择器继承另一个选择器。例:

.class1 {
    border: 1px solid #ddd;
}

class2要继承class1就要使用@extend命令

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

2、Mixin

Mixin有点像C语言的宏(macro),是可以重用的代码块
使用@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、插入文件

@import命令用以插入外部文件
@import "path/filename.scss";
若插入的是css文件,则等同于css的import命令
@import “foo.css”;

高级用法

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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:【转】你所不知道的HTML &lt;head/&gt; 头标签

下一篇:使用eclipse+fiddler+微信web开发者工具调试本地微信页面