SASs是由美国注册会计师协会(AICPA)下属审计准则委员会(ASB)发布,是为了便于注册会计师执行和落实一般公认审计准则(GAAS)。

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运算]字符运算
 
 

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

CSS预编译器:Sass(入门),更快的前端开发的更多相关文章

  1. CSS预编译器:Sass(进阶),更快的前端开发

    1.@if     @if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块 在 Sass 中除了 @if 之,还 ...

  2. 在 CSS 预编译器之后:PostCSS

    提到css预编译器(css preprocessor),你可能想到Sass.Less以及Stylus.而本文要介绍的PostCSS,正是一个这样的工具:css预编译器可以做到的事,它同样可以做到. “ ...

  3. CSS预编译器

    零.CSS预编译器 CSS预处理器是指对生成CSS前的某一语法的处理.CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,供项目使用 CSS预处理器为CSS增加一 ...

  4. CSS进阶之SASS入门指南

    CSS进阶之SASS入门指南         随着跟着公司学习项目的前端的推进,越来越对好奇了许久的SASS垂涎欲滴,哈哈,可能这个词使用不当,没有关系,就是对SASS有一股神秘的爱!好了,闲话不多说 ...

  5. css预处理器sass学习

    SASS 叫做css预处理器,他的基本思想是用一门专门的编程语言来进行页面样式的设计,然后在编译成正常的css文件. Sass的用法 安装 sass是用ruby语言写的,所以我们在安装sass之前要先 ...

  6. CSS vs. JS Animation: 哪个更快

    CSS vs. JS Animation: 哪个更快? CSS vs. JS Animation: 哪个更快? 基于JavaScript的动画竟然已经默默地比CSS的transition动画快了?而且 ...

  7. 全网最热Python3入门+进阶 更快上手实际开发✍✍✍

    全网最热Python3入门+进阶 更快上手实际开发  整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问 ...

  8. laravel 中CSS 预编译语言 Sass 快速入门教程

    CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量.函数.继承等机制,因此很容易写出大量没有逻辑.难以复用和扩展的代码,在日常开发使用中,如果没 ...

  9. CSS预编译器配置-------LESS Sass Stylus webstorm

    预编译器配置说明 开头语,发挥CSS预处器的作用是一种很有挑战性的事情.CSS预处器有不同的语言,就有不同的语法和功能. 语法 在使用CSS预处器之前最重要的是对语法的理解,幸运的是,这三种CSS预处 ...

随机推荐

  1. 如何下载github项目中的部分文件(文件夹)

    https://minhaskamal.github.io/DownGit/#/home 将你要下载的链接放进去即可.

  2. csvkit---python一个牛逼到不行的csv处理库

    先吐槽一下:不管是百度还是谷歌,查来查去除了官方文档之外就没有任何可以借鉴的例子,虽然官方文档写的挺好的.但是我一直以为是在python语言的方式运行的,结果是以命令行的方式运行的,搞得我还以为这个库 ...

  3. PT20150801隆重开班

    PT20150801隆重开班 伴随着秋天的的脚步,带着对梦想的憧憬,POPTEST1508期学员步入正式学习阶段:POPTEST的课程内容吸收了互联网公司先进技术的特点,同时坚持深入浅出的教育特点,完 ...

  4. es suggest did you mean资料

    term suggester 功能介绍 term suggester 根据提供的文档提供搜索关键词的建议,也就是关键词自动纠错.该链接介绍如何使用 term suggester 语法.term sug ...

  5. ReactJS入门3:组件的生命周期

    本文主要介绍组件的生命周期. 组建的生命周期主要分为3个:Mounting.Updating.Unmounting. 1. Mounting:组件被加载到DOM     在本阶段,主要有三个方法: 1 ...

  6. js按值传递和按引用传递

    摘要:js的数据类型有种划分方式为 原始数据类型和 引用数据类型. 原始数据类型 存储在栈(stack)中的简单数据段,也就是说,它们的值直接存储在变量访问的位置.栈区包括了 变量的标识符和变量的值. ...

  7. Vuex随笔

    最近在项目中使用到了vuex,但是在配合vue使用时,也还是遇到了不少的问题,最终还是解决了问题,因此写一篇随笔来记录期间遇到的问题吧 项目概要: Vuex中所储存的的状态如下: Vue中:有一个ta ...

  8. Java -- 浅入Java反射机制

    1,Java 反射是Java语言的一个很重要的特征,它使得Java具体了"动态性". Java 反射机制主要提供了以下功能: 在运行时判断任意一个对象所属的类. 在运行时构造任意一 ...

  9. C#变量、常量、枚举、预处理器指令知多少

    一.变量 C#共有其中变量类型有:静态变量.实类变量.数组元素.数值参数.引用参数.输出参数和局部变量 先定义一个简单的类来说明,如下: public class VariableDefine { p ...

  10. kafka集群中常见错误的解决方法:kafka.common.KafkaException: Should not set log end offset on partition

    问题描述:kafka单台机器做集群操作是没有问题的,如果分布多台机器并且partitions或者备份的个数大于1都会报kafka.common.KafkaException: Should not s ...