sass入门_html/css_WEB-ITnose-html教程-PHP中文网

sass入门_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:25:20

原创

1133人浏览过

sass是一种css的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得css的开发，变得简单和可维护。

SASS 官网介绍：

sass is the most mature（成熟的）,stable（稳定的）,and powerful professional grade CSS extension language in the world.

官方文档：

http://sass-lang.com/documentation/file.SASS_REFERENCE.html

立即学习“前端免费学习笔记（深入）”；

初学sass 遇到的最大阻碍可能是：需要搭建Ruby的运行环境和需要用命令行，其实这都非常简单。

一、安装

1、安装Ruby

SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。

安装SASS请参考SASS官方网站： http://sass-lang.com/install，windows下安装ruby:rubyinstaller.org。

安装时注意一点：勾选Add Ruby executables to your PATH，添加Ruby可执行路径到环境变量再安装。

安装成功Dos窗口输入ruby -v会出现版本信息。

2、安装sass

假定你已经安装好了Ruby，接着在命令行输入下面的命令：gem install sass

安装成功输入sass -v可以看到版本信息。

二、使用

1、编译

Note:注意sass的文件名后缀是scss而不是sass。

将style.scss编译成css

sass style.scss

登录后复制

将style.scss编译后保存成css文件

sass style.scss style.css

登录后复制

将style.scss编译后保存成压缩过的css文件

sass <strong>--style compressed</strong> style.scss style.css

登录后复制

--style控制编译风格，可选参数如下

nested：嵌套缩进的css代码，它是默认值。

expanded：没有缩进的、扩展的css代码。

compact：简洁格式的css代码。

compressed：压缩后的css代码。

sass监听文件或目录，源文件有变动，自动编译。

// watch a filesass --watch input.scss:output.css// watch a directorysass --watch app/sass:public/stylesheetss

登录后复制

2、语法

2.1、注释

和less一样，sass有两张注释

// 单行注释，不会作为最终输出/*     多行注释，以原生CSS的/*注释....*/形式作为最终输出 */

登录后复制

在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

/*!　　　　重要注释！*/

登录后复制

2.2、变量

一般会把颜色，字体，将来会重用的css值存为变量，方便统一修改和维护。

//定义变量$primary-color:#333;//变量调用body{    color:$primary-color;}

登录后复制

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

$side : left;.rounded{    border-#{$side}-radius:5px;}

登录后复制

2.3、嵌套

像html标签嵌套一样进行选择器嵌套写css，但是在生成css时有利有弊。

以下经典用法。

nav {  ul {    margin: 0;    padding: 0;    list-style: none;  }  li { display: inline-block; }  a {    display: block;    padding: 6px 12px;    text-decoration: none;  }}

登录后复制

会生成：

nav ul {  margin: 0;  padding: 0;  list-style: none; }nav li {  display: inline-block; }nav a {  display: block;  padding: 6px 12px;  text-decoration: none; }

登录后复制

属性也可以嵌套，比如border-color属性如下，border后面必须加冒号。

p{   border:{        color:red;    }}

登录后复制

在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：

a{    &:hover{color:red;}}

登录后复制

2.4、Less css片段和引入

目的：方便模块化和管理，小模块可维护性好。最终编译成一个css文件，这点比纯css的@import好。

弊端：多一个@import就多一个http请求。

片段命名：_partial.scss，引入用@import。

Demo:将_reset.scss import到base.scss。

_reset.scss如下

// _reset.scsshtml,body,ul,ol {   margin: 0;  padding: 0;}

登录后复制

base.scss如下

// base.scss@import 'reset';<br />body {  font: 100% Helvetica, sans-serif;  background-color: #efefef;}

登录后复制

@import 'reset'即可。

小门道AI

小门道AI是一个提供AI服务的网站

117

查看详情

2.5、mixin 重用代码块

在sass中可用定义重用的代码块，且可传参数，方便日后根据需求调用。

定义：通过@minxin name即可定义一个重复利用的样式。

调用：@include name

demo:

// mixin@mixin box($H:30px,$col:red){    height:$H;    background-color:$col;}div.box{    @include box; //使用默认值}div.box1{    @include box(50px,blue); //传参}

登录后复制

编译结果：

div.box {  height: 30px;  background-color: red; }div.box1 {  height: 50px;  background-color: blue; }

登录后复制

css中有一些浏览器兼容性的代码，一些css3私有前缀等，此时使用mixins非常便捷，一个经典例子border-radius如下。

@mixin border-radius($radius){    -webkit-border-radius: $radius;    -moz-border-radius: $radius;    -ms-border-radius: $radius;          border-radius: $radius;}.box{@include border-radius(10px);}

登录后复制

2.6、继承

继承让一个选择器的样式被另一个选择器复用和覆盖。是一个DRY的语法，也最sass中有用的语法之一。

语法：@extend 选择器

demo:一系列提示信息。

.message{    border:1px solid #ccc;    padding:10px;    color:#333;}.success{    @extend .message;    border-color:green;}.error{    @extend .message;    border-color:red;}.warning{    @extend .message;    border-color:yellow;}

登录后复制

编译后的css【继承实现了css组合声明】

.message, .success, .error, .warning {  border: 1px solid #ccc;  padding: 10px;  color: #333; }.success {  border-color: green; }.error {  border-color: red; }.warning {  border-color: yellow; }

登录后复制

2.7、运算符

包括+，-，*，、，%。

demo:计算aside和article的宽度。

.container{    width:100%;}article[role="main"]{    float:left;    width:600px/960px*100%;}aside[role="complimentary"]{    float:right;    width:300px/960px*100%;}

登录后复制

编译后css

.container {  width: 100%; }article[role="main"] {  float: left;  width: 62.5%; }aside[role="complimentary"] {  float: right;  width: 31.25%; }

登录后复制

2.8、颜色

sass中集成了大量的颜色函数，让生成颜色更加简单

lighten(#cc3, 10%) // #d6d65cdarken(#cc3, 10%) // #a3a329grayscale(#cc3) // #808080complement(#cc3) // #33c

登录后复制

demo:

$linkColor: #08c;a {    text-decoration:none;    color:$linkColor;    &:hover{      color:darken($linkColor,10%);    }}

登录后复制

编译成css

a {  text-decoration: none;  color: #08c; }a:hover {  color: #006699; }

登录后复制

3、高级语法

3.1、条件

if判断何种条件用何种样式。

p{    @if 1+1==2{border:1px solid red;}    @if 5<2 {border:2px dotted red;}}

登录后复制

if,else配合使用。

demo:判断颜色中亮度大于30%，设置背景色为黑色，否则为白色。

$color : #1875e7;p{    @if lightness($color)>30%{        background-color:#000;    }@else {        background-color:#fff;    }}

登录后复制

备注：lightness($color)：从一个颜色中获取亮度（lightness）值；

3.2、循环语句

for循环

@for $i from 1 to 10{    .border-#{$i}{        border:#{$i}px solid blue;    }}

登录后复制

编译生成如下css

.border-1 { border: 1px solid blue; }.border-2 {border: 2px solid blue; }.border-3 {border: 3px solid blue; }.border-4 {border: 4px solid blue; }.border-5 {border: 5px solid blue; }.border-6 {border: 6px solid blue; }.border-7 {border: 7px solid blue; }.border-8 {border: 8px solid blue; }.border-9 {border: 9px solid blue; }

登录后复制

while循环

$i : 6;@while $i > 0{    .item-#{$i} {width:2em * $i;}    $i : $i - 2;}

登录后复制

编译成css

.item-6 {width: 12em; }.item-4 {width: 8em; }.item-2 {width: 4em; }

登录后复制

each遍历

@each $member in a,b,c,d{    .#{$member}{        background-image:url("images/#{$member}.jpg");    }}

登录后复制

编译成css

.a {background-image: url("images/a.jpg"); }.b {background-image: url("images/b.jpg"); }.c {background-image: url("images/c.jpg"); }.d {background-image: url("images/d.jpg"); }

登录后复制

3.3自定义函数

sass可自定义函数。

@function double($n){    @return $n * 2;}#sidebar{    width:double(5px);}

登录后复制

编译后css

#sidebar {width: 10px; }

登录后复制

资源链接：

http://sass-lang.com/guide

http://www.w3cplus.com/sassguide/

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：有问题欢迎与我讨论，共同进步。

大家都在看：

HTML文档怎么嵌入CSS_CSS嵌入HTML文档的全面解析 html如何嵌入app_HTML内容嵌入移动应用（WebView）方法 html5写日期怎么写_HTML5时间日期输入类型使用指南解决iFrame尺寸调整难题：响应式视频嵌入的正确姿势实现按钮背景滑入效果并确保文本可见性

sass入门_html/css_WEB-ITnose

1、安装Ruby

2、安装sass

1、编译

2、语法

2.1、注释

2.2、变量

2.3、嵌套

2.4、Less css片段和引入

2.5、mixin 重用代码块

2.6、继承

2.7、运算符

2.8、颜色

3、高级语法

3.1、条件

3.2、 循环语句

3.3自定义函数

大家都在看：

3.2、循环语句