码迷,mamicode.com
首页 > 其他好文 > 详细

Sass入门——简介+语法格式及编译调试

时间:2016-04-15 21:55:16      阅读:279      评论:0      收藏:0      [点我收藏+]

标签:

本文来自慕课网大漠

Sass简介

Sass和SCSS区别

1、后缀名不同,很好理解
2、Sass以严格的缩进语法规则书写,不带大括号和分号;而SCSS的语法规则和CSS的语法很类似。
Sass:
$font-stack: Helvetica, sans-serif //定义变量
$primary-color: #333 //定义变量
 
body
font: 100% $font-stack
color: $primary-color

 

SCSS:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;
 
body {
font: 100% $font-stack;
color: $primary-color;
}

编译出来的CSS:

body {
font: 100% Helvetica, sans-serif;
color: #333;
}

SCSS写法和CSS没什么区别,所以Sass大家更喜欢(什么鬼?)。简单说就是,你把.css改成.scss也能用。

安装Sass的过程我就省略了。
编译
命令编译
命令行、gulp/grunt、工具
输出方式
嵌套输出方式nested
Sass:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
 
li { display: inline-block; }
 
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}

编译时戴上参数"--style nested"

sass --watch test.scss:test.css --style nested
编译出来长这样:
nav ul {
margin: 0;
padding: 0;
list-style: none; }
nav li {
display: inline-block; }
nav a {
display: block;
padding: 6px 12px;
text-decoration: none; }

展开输出方式expanded

编译时加参数 "--style expanded"
sass --watch test.scss:test.css --style expanded
跟nested毛区别都没有,就把闭合大括号另起一行放了。
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}

紧凑输出方式compact

编译时加参数 "--style compact"
sass --watch test.scss:test.css --style compact
同样没啥区别,把CSS放在一行
nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }

压缩输出方式compressed

编译时加参数 "--style compressed"
这个区别稍微大了点,把注释和空格给去掉了
nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}

 

 

Sass入门——简介+语法格式及编译调试

标签:

原文地址:http://www.cnblogs.com/dearzui/p/5396917.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!