CSS预编译器:Sass(入门),更快的前端开发

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

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

时间: 05-11

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

css预处理器sass入门学习

SASS 叫做css预处理器,他的基本思想是用一门专门的编程语言来进行页面样式的设计,然后在编译成正常的css文件. Sass的用法 安装 sass是用ruby语言写的,所以我们在安装sass之前要先安装ruby(ruby安装自行百度),执行下面命令安装: gem install sass 使用 sass就是普通的文本文件,后缀名为.scss.然后让我们用sass的语法写好文件之后,需要编译成.css文件才能供html文件使用(即通过link标签引入html文件),那么我们就可以使用命令行或是g

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

1.@if @if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块 在 Sass 中除了 @if 之,还可以配合 @else if 和 @else 一起使用. 假设要控制一个元素隐藏或显示,我们就可以定义一个混合宏,通过 @[email protected] 来判断传进参数的值来控制 display 的值 [email protected]循环 在制作网格系统的时候,大家应该对 .col1~.col12 这样

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

详情请咨询  QQ  709639943 01.Python Flask 构建微电影视频网站 02.Python3 全网最热的Python3入门+进阶 比自学更快上手实际开发 03.Python3.6 强力Django+杀手级Xadmin打造上线标准的在线教育平台 04.python_进阶强化 05.Java秒杀系统方案优化 高性能高并发实战 06.企业级刚需Nginx入门,全面掌握Nginx配置+快速搭建高可用架构 07.快速上手Linux 玩转典型应用 08.全面系统讲解CSS 工作应用+面

CSS vs. JS Animation: 哪个更快

CSS vs. JS Animation: 哪个更快? CSS vs. JS Animation: 哪个更快? 基于JavaScript的动画竟然已经默默地比CSS的transition动画快了?而且,Adobe和 Google竟然一直在发布可以媲美原生应用的富媒体移动站点? 这篇文章将会逐点讲解基于JavaScript的DOM动画库,比如Velocity.js和GSAP,是如何比jQuery和基于CSS的动画库高效的. jQuery 让我们先从这个事实开始:JavaScript和jQuery被

CSS预处理器Sass(Scss)、Less、Stylus

CSS 预处理编译器能让我成程序化其的方式编写CSS代码,可以引入CSS中没有的变量.条件.函数等特性,从而让代码更简单易维护,但一般按预处理器语法编写的代码无法直接在浏览器中运行,需用通过工具比如gulp转换成标准的CSS语法,从而在浏览器中运行.个人理解它是标准CSS语法的扩展及增强,能在一定程度上提高编码效率. 三种预处理器的对比: Sass诞生是最早也是最成熟的CSS预处理器,有Ruby社区和Compass支持:安装.编译依赖Ruby环境: Stylus早期服务器Node JS项目,在该

关于前端CSS预处理器Sass的小知识!

前面的话 ??"CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工具,提 供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护.本文将详细介绍sass的使用 定义 ??Sass是一门高于CSS的元语言,它能用来清晰地.结构化地描述文件样式,有着比普通CSS更加强大的功能.Sass能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样式

前端CSS预处理器Sass

前面的话 ??"CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护.本文将详细介绍sass的使用 定义 ??Sass是一门高于CSS的元语言,它能用来清晰地.结构化地描述文件样式,有着比普通CSS更加强大的功能.Sass能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样式表

CSS预处理器Sass、LESS 和 Stylus

CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们来简单介绍下什么是 CSS 预处理器,CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用变量.简单的程序逻辑.函数等等在编程语言中的一些基本技巧,可以让你的 CSS 更见简洁,适应性更强,代码更直观等诸多好处. 不要再停留在石器时

css预处理器sass使用教程(多图预警)

css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可变.对于预处理器,广泛使用的有less和sass.在这不做对比,2者大同小异,sass基于Ruby语言编写,所以编译sass文件需要Ruby环境.我们使用sass并不需要过多了解Ruby语言,只需要安装Ruby环境即可,而less则主要是运行在node环境下,功能语法有类似之处.本文主要介绍Ruby