Sass 入门笔记_html/css_WEB-ITnose

在编译 Sass 代码时常常会碰到一些错误，让编译失败。这样的错误有系统造成的也有人为造成的，但大部分都是人为过失引起编译失败。而最为常见的一个错误就是字符编译引起的。在Sass的编译的过程中，是不是支持“GBK”编码的。所以在创建 Sass 文件时，就需要将文件编码设置为“utf-8”。另外一个错误就是路径中的中文字符引起的。建议在项目中文件命名或者文件目录命名不要使用中文字符。而至于人为失误造成的编译失败，在编译过程中都会有具体的说明，大家可以根据编译器提供的错误信息进行对应的修改。

嵌套输出方式 nested展开输出方式 expanded  紧凑输出方式 compact 压缩输出方式 compressed

嵌套输出方式 nested1、嵌套输出方式 nestedSass 提供了一种嵌套显示 CSS 文件的方式。例如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编译出来的 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; }

展开输出方式 expanded2、嵌套输出方式 expandednav {  ul {    margin: 0;    padding: 0;    list-style: none;  }  li { display: inline-block; }  a {    display: block;    padding: 6px 12px;    text-decoration: none;  }}在编译的时候带上参数“ --style expanded”:sass --watch test.scss:test.css --style expanded这个输出的 CSS 样式风格和 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;}

紧凑输出方式 compact2、嵌套输出方式 compactnav {  ul {    margin: 0;    padding: 0;    list-style: none;  }  li { display: inline-block; }  a {    display: block;    padding: 6px 12px;    text-decoration: none;  }}在编译的时候带上参数“ --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; }

压缩输出方式 compressed2、压缩输出方式 compressednav {  ul {    margin: 0;    padding: 0;    list-style: none;  }  li { display: inline-block; }  a {    display: block;    padding: 6px 12px;    text-decoration: none;  }}在编译的时候带上参数“ --style compressed”:sass --watch test.scss:test.css --style compressed压缩输出方式会去掉标准的 Sass 和 CSS 注释及空格。也就是压缩好的 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}

声明变量

Sass 的变量包括三个部分：声明变量的符号“$”变量名称赋予变量的值来看一个简单的示例，假设你的按钮颜色可以给其声明几个变量：$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7$btn-primary-color : #fff !default;$btn-primary-bg : $brand-primary !default;$btn-primary-border : darken($btn-primary-bg, 5%) !default;如果值后面加上!default则表示默认值。

普通变量与默认变量普通变量定义之后可以在全局范围内使用。$fontSize: 12px;body{    font-size:$fontSize;}编译后的css代码：body{    font-size:12px;}默认变量sass 的默认变量仅需要在值后面加上 !default 即可。$baseLineHeight:1.5 !default;body{    line-height: $baseLineHeight; }编译后的css代码：body{    line-height:1.5;}

 

变量的调用

//Welcome to imooc learning Sass$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7$btn-primary-color: #fff !default;$btn-primary-bg : $brand-primary !default;$btn-primary-border : darken($btn-primary-bg, 5%) !default;$width:100px;.btn-primary { background-color: $btn-primary-bg; color: $btn-primary-color; border: 1px solid $btn-primary-border,$width;}

什么时候声明变量？

什么时候声明变量？我的建议，创建变量只适用于感觉确有必要的情况下。不要为了某些骇客行为而声明新变量，这丝毫没有作用。只有满足所有下述标准时方可创建新变量：该值至少重复出现了两次；该值至少可能会被更新一次；该值所有的表现都与变量有关（非巧合）。基本上，没有理由声明一个永远不需要更新或者只在单一地方使用变量。温馨小提示：您在学习 sass 时，除了在我们网页上可以做练习，还有一个便利在线编辑器网址如下：http://sassmeister.com/