CSS预编译器:Sass(入门),更快的前端开发
来源:互联网 发布:淘宝数据魔方下载 编辑:程序博客网 时间:2024/05/17 05:50
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;
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;
}
border: {
top: 1px solid red;
bottom: 1px solid green;
}
}
9.[Sass]嵌套-伪类嵌套
10.[Sass]混合宏-声明混合宏
11.[Sass]混合宏-调用混合宏
匹配了一个关键词“@include”来调用声明好的混合宏
混合宏的参数--传一个带值的参数
.box {
@include border-radius(50%);
@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;
width: 20px + 8in;
}
编译的结果
.box {
width: 788px;
width: 788px;
}
不同类型的单位时,编译也会报错
[Sass运算]减法
.content {
width: $full-width - $sidebar-width;
width: $full-width - $sidebar-width;
}
[Sass运算]乘法
Sass 中的乘法运算和前面介绍的加法与减法运算还略有不同。虽然他也能够支持多种单位(比如 em ,px , %),但当一个单位同时声明两个值时会有问题。
.box {
width:10px * 2px;
}错误
.box {
width: 10px * 2;
width: 10px * 2;
}
正确
[Sass运算]除法
.box {
width: (100px / 2);
width: (100px / 2);
}
“/”不能单独用
[Sass运算]数字运算
.box {
width: ((220px + 720px) - 11 * 20 ) / 12 ;
width: ((220px + 720px) - 11 * 20 ) / 12 ;
}
[Sass运算]颜色运算
color: #010203 * 2;
color: #010203 + #040506;
[Sass运算]字符运算
注意,如果有引号的字符串被添加了一个没有引号的字符串 (也就是,带引号的字符串在 + 符号左侧), 结果会是一个有引号的字符串。 同样的,如果一个没有引号的字符串被添加了一个有引号的字符串 (没有引号的字符串在 + 符号左侧), 结果将是一个没有引号的字符串。 例如:
阅读全文
0 0
- CSS预编译器:Sass(入门),更快的前端开发
- CSS预编译器:Sass(进阶),更快的前端开发
- SASS的简单运用,css更快
- CSS预编译工具(SASS,LESS)
- sass 使用 css预编译
- CSS预编译:sass-scss
- 前端CSS预处理器Sass
- 前端CSS预处理器Sass
- CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(4)构造尺寸更灵活的背景
- 前端之css预编译
- 前端入坑出坑总结——为了更快的出入下一个坑(项目开发总结)
- CSS预处理器SASS入门
- Sass的使用(让css更优雅和强大)---第一节
- Sass的使用(让css更优雅和强大)---第二节
- sass笔记-1|Sass是如何帮你又快又好地搞定CSS的
- CSS的预编译——less语言基本语法教程(入门)
- (web开发)更快的了解新项目
- 预编译语言Sass中几种常用的写法
- 学习笔记:javascript 表单对象(form)
- P1979 [NOIP]华容道(70分的暴力)
- 学习笔记:javascript 文档对象(document)
- 学习笔记:javascript body常用事件
- Leetcode练习<十九> 字符串数组的公共前缀
- CSS预编译器:Sass(入门),更快的前端开发
- CSS预编译器:Sass(进阶),更快的前端开发
- java开发环境搭建,jdk,eclipse,git,gradle,ssh,tomcat,mysql,navicat mysql,maven环境搭建
- jQuery基础(鼠标事件,表单事件,键盘事件,自定义事件 篇)
- jQuery基础(动画篇 animate,显示隐藏,淡入淡出,下拉切换)
- 东南大学 崇志宏:当数据库遇到区块链
- jQuery基础(常用插件 表单验证,图片放大镜,自定义对象级,jQuery UI,面板折叠)
- jQuery基础(工具函数,浏览器信息,检测节点,字符串,$.extend())
- jQuery基础(样式篇,DOM对象,选择器,属性样式)