首页 > > 网页制作 > css >

Sass

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

注：配合查看：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 <head/> 头标签

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

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

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签