首页 > > 网页制作 > css >

CSS预编译器：Sass（入门），更快的前端开发

2018-06-24 01:19:49来源：未知 阅读 ()

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

Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码，易于组织和维护。

SASS是对CSS3（层叠样式表）的语法的一种扩充，它可以使用巢状、混入、选择子继承等功能，可以更有效有弹性的写出Stylesheet。Sass最后还是会编译出合法的CSS让浏览可以使用，也就是说它本身的语法并不太容易让浏览器识别（虽然它和CSS的语法非常的像，几乎一样），因为它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。
 
sass 入门 api语法
1.[Sass]常见的编译错误
 
在编译 Sass 代码时常常会碰到一些错误，让编译失败。这样的错误有系统造成的也有人为造成的，但大部分都是人为过失引起编译失败。
 
而最为常见的一个错误就是字符编译引起的。在Sass的编译的过程中，是不是支持“GBK”编码的。所以在创建 Sass 文件时，就需要将文件编码设置为“utf-8”。
 
另外一个错误就是路径中的中文字符引起的。建议在项目中文件命名或者文件目录命名不要使用中文字符。而至于人为失误造成的编译失败，在编译过程中都会有具体的说明，大家可以根据编译器提供的错误信息进行对应的修改。
 
2.[Sass]不同样式风格的输出方法
 
- 嵌套输出方式 nested
- 展开输出方式 expanded
- 紧凑输出方式 compact
- 压缩输出方式 compressed
 
3.[Sass]声明变量
 

 

 
4.[Sass]普通变量与默认变量
 
全局变量

 

 

默认变量
 
5.[Sass]变量的调用
 
在 Sass 中声明了变量之后，就可以在需要的地方调用变量。调用变量的方法也非常的简单。
 
.btn-primary {
  background-color: $btn-primary-bg;
  color: $btn-primary-color;
  border: 1px solid $btn-primary-border;
}
 
6.[Sass]局部变量和全局变量
 
$color:orange !default;
当在局部范围（选择器内、函数内、混合宏内...）声明一个已经存在于全局范围内的变量时，局部变量就成为了全局变量的影子。基本上，局部变量只会在局部范围内覆盖全局变量。
 
7.[Sass]嵌套-选择器嵌套
 
- 选择器嵌套
- 属性嵌套
- 伪类嵌套

 

 
8.[Sass]嵌套-属性嵌套
 
.box {
  border: {
  top: 1px solid red;
  bottom: 1px solid green;
  }
}
 
9.[Sass]嵌套-伪类嵌套
 

 

 

 
 
10.[Sass]混合宏-声明混合宏
 
 

 

 

 

 
11.[Sass]混合宏-调用混合宏
 
匹配了一个关键词“@include”来调用声明好的混合宏
 
     混合宏的参数--传一个带值的参数
 
.box {
  @include border-radius(50%);
}
 
     混合宏的参数--传多个参数
 
@mixin center($width,$height){
@include center(500px,300px);
 
12.[Sass]扩展/继承
 
在 Sass 中也具有继承一说，也是继承类中的样式代码块。在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。如下所示：

 

 

 
 
13.[Sass]占位符 %placeholder
 
Sass 中的占位符 %placeholder 功能是一个很强大，很实用的一个功能，这也是我非常喜欢的功能。他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。来看一个演示：
 

 

 
14.[Sass]混合宏 VS 继承 VS 占位符
 
个人建议：如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。
个人建议：如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。

 

 
15.[Sass]插值#{}
 
当你想设置属性值的时候你可以使用字符串插入进来。
 
#{}语法并不是随处可用，你也不能在 mixin 中调用
 

 

 
16.[Sass]注释
 
1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”
2、类似 JavaScript 的注释方式，使用“//”
 
两者区别，前者会在编译出来的 CSS 显示，后者在编译出来的 CSS 中不会显示，
 
17.[Sass]数据类型
 

 

 

 
 
     [Sass]字符串
 

 

 

 
     
 
     [Sass]值列表
 
 

 

 

 
18.[Sass运算]加法-----------------Sass的基本特性-运算----------
 
.box {
  width: 20px + 8in;
}
编译的结果
.box {
  width: 788px;
}
 
不同类型的单位时，编译也会报错
 
     [Sass运算]减法
 
.content {
  width: $full-width -  $sidebar-width;
}
    
     [Sass运算]乘法
 
Sass 中的乘法运算和前面介绍的加法与减法运算还略有不同。虽然他也能够支持多种单位（比如 em ,px , %），但当一个单位同时声明两个值时会有问题。 
.box {
  width:10px * 2px;
}错误
 
.box {
  width: 10px * 2;
}
正确
     
     [Sass运算]除法
 
.box {
  width: (100px / 2); 
}
 
“/”不能单独用
 
     [Sass运算]数字运算
 
.box {
  width: ((220px + 720px) - 11 * 20 ) / 12 ; 
}
     
     [Sass运算]颜色运算
 
color: #010203 * 2;
color: #010203 + #040506;
 
     [Sass运算]字符运算
 
 

 

 

 
注意，如果有引号的字符串被添加了一个没有引号的字符串 （也就是，带引号的字符串在 + 符号左侧）， 结果会是一个有引号的字符串。 同样的，如果一个没有引号的字符串被添加了一个有引号的字符串 （没有引号的字符串在 + 符号左侧）， 结果将是一个没有引号的字符串。 例如：
 
 
 
 
 
 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：关于CSS3的filter(滤镜) 属性

下一篇：HTTP

相关文章

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

热门词条
最新资讯
热门关注
热门标签