Sass 的使用

sass的使用

前言

之前一直听说过sass和less。以为自己没用过,其实曾经的时候还是用过sass的。只不过是在别人搭好的结构上直接使用的以至于印象不深刻。然后也纠结过用sass还是less。两个框架在语法上大体上是相同的,主要的不同就是实现方式。less是基于javascript,而sass是基于服务器的。前人的经验可以给我们提供更好的选择,由于sass在github上的评分比较高,所以我们选择了sass作为我们css端的开发工具。

安装 sass

一、安装ruby(由于我们现在用的是gulp,所以就没必要安装ruby)

因为sass依赖于ruby环境,所以装sass之前先确认装了ruby。官网下载ruby。在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,否则以后使用编译软件时会提示找不到ruby环境。

二、安装sass

安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开Start Command Prompt with Ruby

然后直接在命令行中输入gem install sass按回车键确认。等待一段时间后显示安装成功

使用 sass

sass文件就是普通的文本文件,里面可以直接使用css语法。文件后缀名是.scss,意思为Sassy CSS。

正常情况下浏览器是不能解析scss文件的,所以要将.scss文件转为css代码(假设文件名为test)

如果要将显示结果保存成文件,后面则要跟一个.css的文件

在项目中应用

一、路径设计:全局文件为sass.scss,里面引用模块。其中public-vaiable文件里面为放置的公共变量,(必须加载在所有模块的上面,否则在它上面的引用找不到变量就会报错)

二、嵌套:SASS允许选择器嵌套,好处的话我觉得看起来更加清晰,并且不用写一长串的选择器。

三、变量的运用

1、设置常用的字号:由于最近的wap端的像素单位用的是rem,然后设置了一些常用的字号从12-20。运用的时候直接写font-size: $size14;就好。

2、设置通用颜色:由于网站的颜色要统一化,例如黄色就是一种黄,不能杂乱。所以运用颜色变量能更好的体现,并且更方便维护。下图中如果后期黄色的色值要变动一下,那么改了这里,所有的就都生效。在抢单的页面中现在用到的有三种灰色,$gray文字的浅灰色,$dark-gray为文字的深灰色,$line-gray为横线的灰色。

3、浏览器前缀:由于css3的样式好多并不是被浏览器完全兼容,所以必须带上其浏览器所专属的前缀才能够被识别。目前所要带上的前缀有-webiktih和-o和-moz和-ms。这样一个样式就要写四遍,很麻烦。而sass的变量能帮我们很好的解决这个麻烦。如下图以圆角的前缀举例,@mixin为sass的混合声明用法,可以传递参数,参数名以$符号开始,多个要用分号隔开。rounded是我自己给起的名称,括号里面为变量。

调用的时候要用@include 引入 后面加名称,括号里指定参数。如果想用默认参数,就不需要指定直接写@include rounded()就可以

END

现在在项目中运用的点就以上这些,当然sass不只有这些功能。实际中用到新的功能我会及时更新到这篇文章的应用模块里面。从目前来说,运用sass对我们确实是有益处的,而目前遇到的坑就是在路径的那里,必须记得把公共变量的文件写在文档流的最上面。否则会调用不到,然后gulp也会报错并停止运行。

时间: 2024-11-06 07:17:29

Sass 的使用的相关文章

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;} 这就意味着,我们要配备一个很好的记忆力

Sass 基本函数

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

Sass 和 SCSS 有什么区别?

Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点: 文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名 语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似. Sass 语法 $font-stack: Helvetica, sans-serif //定义变量 $primary-color: #33

LESS 与 SASS

作为 CSS 的一种扩展,Less 不仅完全兼容 CSS 语法,而且连新增的特性也是使用 CSS 语法.这样的设计使得学习 Less 很轻松,而且你可以在任何时候回退到 CSS. 用less来控制样式,更加的方便,写好的less代码,可以通过编译生成css,这是对css非常强大的扩展,让我们写起代码时,更加的顺畅. 变量,在less中声明变量用@,例如: @test: red; .test{ color: @test; } 编译后: .test{ color: red; } 注:变量只能定义一次

SASS环境搭建及HBuilder中sass预编译配置

---------------------------------Ruby安装-------------------------------- 1.先下载一个ruby的安装文件:文件名可以搜索:rubyinstaller-2.3.1-x64 如图: 2.建议装到c盘(这里记住你的安装地址,后期有用) 3.勾选中间的path 然后就一路"南下",直到看到finish 4.win7系统的在左下角输入start,定位到Start Command Prompt with Ruby面板并调出 5