SASS 的相关函数

SASS是Syntactically Awesome Stylesheete 的缩写，它是css的一个开发工具，提供了很多便利和简单的语法，让css看起来更像是一门语言，这种特性也被称为“css预编译”。它的主要设计思想是让我们可以按照编程的思路编写自己的样式，然后通过“编译器”生成我们所需要的css文件。sass并不是css的替代品，它只是让css变得更加高效、可维护，也不必去修改编译后的css文件。

1.安装Ruby,然后gem install sass

2.建一个input.scss,执行sass input.scss output.css,会生成一个对应的output.css文件

sass --style compressed input.scss:output.css

输出样式的风格可以有四种选择，默认为nested

nested：嵌套缩进的css代码
expanded：展开的多行css代码
compact：简洁格式的css代码
compressed：压缩后的css代码

3.如果想实时监听,则执行sass --watch input.scss:output.css

　sass --watch --style expanded sass/loader.scss:css/loader.css

4.如果想多个文件一起监听,则执行sass --watch sass(文件夹):css(文件夹)

5. sass有两种可选的文件后缀.sass和.scss，两者的主要区别就是在书写格式上。

.sass文件是缩进式的写法，没有括号, 对格式要求比较严谨，末尾不能有分号,跟coffee差不多

.scss文件的写法和css一致

时间： 2024-08-28 11:55:28

SASS 的相关函数的相关文章

SASS - 函数

SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS – @extend(继承)指令 SASS – 操作符 SASS – 函数 SASS – 输出格式本文介绍Sass函数.Sass包含大量函数,本文介绍最重要最常用的函数,其他可以参考官方文档. 颜色函数 sass包含很多操作颜色的函数.例如:lighten() 与 darken()函数可用于调亮或调

gulp教程（sass，livereload，md5，css压缩，js压缩，img的base64）

环境 node -v v6.10.3 npm -v 3.10.10 package.json如下: { "name": "zhcsdata", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": &

LSEE和SASS的区别

/Less中的注释,但这种不会被编译/* * 这也是Less中的注释,但是会被编译 * * [Less中的变量] * * 1.声明变量:@变量名:变量值: * 使用变量:@变量名 * * >>>Less中变量的类型: * ①数字类 ①10px ②字符串:无引号字符串 red 有引号字符串 "haha" * ②颜色类red #000000 rgb() ③值列表类型:用逗号或空格分割 10px so

sass语法基础知识

文件后缀名 sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号:另一种就是我们这里使用的scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号.而本教程中所说的所有sass文件都指后缀名为scss的文件.在此也建议使用后缀名为scss的文件,以避免sass后缀名的严格格式要求报错. //文件后缀名为sass的语法 body background: #eee font-size:12px p background: #0982c1 //文件后缀名为scss的语法 b

sass学习笔记（五）：sass的运算

(一).加法加法运算是 Sass 中运算中的一种,在变量或属性中都可以做加法运算.如: .box { width: 20px + 8in; } 编译出来的 CSS: .box { width: 788px; } 但对于携带不同类型的单位时,在 Sass 中计算会报错,如下例所示: .box { width: 20px + 1em; } 编译的时候,编译器会报错:"Incompatible units: 'em' and 'px'." (二).减法 Sass 的减法运算和加

10天精通Sass 之处理字符串与数字的函数

Sass的函数简介 Sass中自备了一系列的功能函数,包括: - 字符串函数 - 数字函数 - 列表函数 - 颜色函数 - Introspection函数 - 三元函数除了Sass中已提供的函数,我们还可以根据自己的需求定义函数,称为自定义函数. 字符串函数 * unquote($string) * :删除字符串中的引号 * quote($string) * :给字符串加引号 unquote()函数用来删除字符串的引号,如果这个字符串没有引号,则返回原始字符串. .test1 { conte

SASS详解之沿袭(extend)

SASS详解之继承(extend) 每一个类名都有可能有另一个类名的所有样式和它自己的特定样式的.当一个div的身上有两个类名,一个是“one”,另一个是“two”的时候.如下 HTML代码 <div class="one two"> 梦龙小站 </div> CSS代码 .one {width:100px;height:100px;} .two {background:red;border:5px solid #000;} 这就意味着,我们要配备一个很好的记忆力

php数据库操作常用相关函数

MySQL访问函数都需要有相应的权限才能运行.常用的相关函数介绍如下: (1)integer mysql_connect(主机,用户名,口令); 此函数开始一个对指定主机上的MySQL数据库的连接.若该数据库位于一个不同地端口,则在主机名后加上冒号和端口号.所有参数均为可选的,缺省情况下分别对应为本地主机.用户正在执行的脚本名和空.主机可以是IP地址或域名. 在脚本执行结束时,连接被自动关闭,也可以用mysql_close提前关闭. (2)boolean mysql_create_db(数据库名

Sass 基本函数

Sass 中的常用函数一.字符串函数 1. unquote($string): 删除字符串前后的引号,删除一对引号,如果这个字符串没有带有引号,将返回原始的字符串. 示例: .text1 { content: unquote("'hello'");} 2. quote($string): 给字符串添加引号,而且字符串中间有单引号或者空格时,需要用单引号或双引号括起,否则编译的时候将会报错(解决方案就是去掉空格,或者加上引号).同时 quote() 碰到特殊符号,比如: !.?.>