css 15-Sass入门
15-Sass入门
#Sass简介
大家都知道,js 中可以自定义发量,css 仅仅是一个标记语言,不是编程语言,因此不可以自定义发量、不可以引用等等。
面对这些问题,我们现在来引入 Sass,简单的说,他是 css 的升级版,可以自定义发量,可以有 if 语句,还可以嵌套等等,很神奇吧!那下面我们就来介绍返个神奇的 Sass。
Sass比Less的功能更强大,也更复杂。
#Sass 的定义
Sass:英文是 Syntactically Awesome Stylesheets Sass。最早由 Hampton Catlin 开发和设计。 一种帮助你简化 CSS 工作流程的方式,帮助你更容易维护和开发 CSS 内容。
Sass 是这个世界上最成熟、稳定和强大的专业级 CSS 扩展语言。
Sass专注的是怎样创建优雅的样式表,而不是内容。
#Sass、Compass与CSS
关系:
- Less/Sass是语法、Compass是框架、CSS是目标。
Sass&Compass的好处:
写出更优秀的CSS。
解决CSS编写过程中的痛点问题,比如精灵图合图、属性的浏览器前缀处理等。
有效组织样式、图片、字体等项目元素。
受众群体:
重构的同学,写很多CSS,不知如何自动化。
希望在项目周期内更好地组织项目内容。
#Sass的安装
sass引擎是用Ruby语言开发的(但是两者的语法没有关系),因此在安装 Sass 前,需要先安装Ruby(mac下自带Ruby无需再安装Ruby)。
下面来讲一下 Windows 下的安装Sass的步骤。
#第一步:安装Ruby(windows环境)
下载地址:http://rubyinstaller.org/downloads/
貌似网络很慢,不一定能下载成功~
安装时,记得勾选“环境变量”:
安装完ruby之后,在命令行中输入ruby -v
,查看ruby的的版本:
#关于Mac下的Ruby
刚刚说了,Mac下自带Ruby,但是版本肯定很老:
有的时候,我们可能需要使用特定版本的ruby,或者在不同的ruby版本之间进行切换,所以,大家可以尝试安装rvm
,它是ruby的版本管理工具。官网是:https://rvm.io
#第二步:安装 Sass
安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开Start Command Prompt with Ruby。输入gem install sass
安装Sass。
PS:Ruby 是使用 gem 来管理它的各种包(比如Sass)。我们安装好ruby之后,gem会自动安装上;类似于,我们安装完node之后,npm也自动安装好了。
但是,由于访问网络受限,我们可以先切换到淘宝的镜像,再安装Sass。步骤如下:
(1)移除默认的镜像,添加淘宝的镜像:
gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/ //注意:如果你系统不支持https,请将淘宝源更换成:gem sources -a http://gems.ruby-china.org
PS:我测试了一下,Win 7 不支持https,Mac支持https。
(2)查看当前使用的是哪个镜像:
gem sources -l
(3)安装sass:
紧接着,输入如下命令安装Sass:
gem install sass // 如果mac下输入这个命令时没有权限,则需要在前面加上 sudo
系统会自动安装上最新版本的Sass。
查看sass版本的命令为:
sass -v
升级sass版本的命令为:
gem update sass
你也可以运行帮助命令行来查看你需要的命令:
sass -h
参考链接:https://www.w3cplus.com/sassguide/install.html
#Compass 简介和安装
安装完sass之后,我们在main.scss中写一些代码,然后输入如下命令,就可以将scss文件
转化为css文件
:
sass main.scss main.css
然而,真正的项目开发中,我们不一定是直接使用 sass 命令,而是使用 Compass。
#Compass 简介
官网是:http://compass-style.org/。
Compass 是开源的CSS书写框架。
#Compass 安装
输入如下命令安装 Compass:
gem isntall compass
输入如下命令查看版本:
compass -v
compass可以直接用来搭建前端项目的样式部分,但并不是常用的方法。
#Compass的简单使用
通过 Compass 创建工程目录:
cd workspace
compass create CompassDemo
文件结构如下:
/sass
- ie.scss
- print.scss
- screen.scss
/stylesheets
- ie.css
- print.css
- screen.css
config.rb
为了能够让文件实时编译,我们可以通过 copass watch 监听sass文件的变化:
cd CompassDemo
compass watch
当.scss文件改动时,会自动生成对应的.css文件。
#Sass的语法
#两种后缀名(两种语法)
sass 有两种后缀名文件:
(1).sass
:对空格敏感。不使用大括号和分号,所以每个属性之间是通过换行来分隔。
比如:
h1
color: #000
background: #fff
这种语法是类ruby的语法,和CSS的语法相比,相差较大。所以,在3.0版本中就引入了.scss
的语法。
(2).scss
:是css语法的超集,可以使用大括号和分号。
比如:
h1 {
color: #000;
background: #fff;
}
注意:一个项目中可以混合使用两种语法,但是一个文件中不能同时使用两种语法。
两种格式之间的转换:
我们在工程目录下新建main.scss
,输入如下代码:
*{
margin: 0;
padding: 0;
}
然后输入如下命令,就可以将上面的main.scss
转化为main.sass
:
sass-convert main.scss main.sass
打开生成的main.sass
,内容如下:
*
margin: 0
padding: 0
#变量语法
Sass 是通过$
符号来声明变量。
(1)我们新建一个文件_variables.scss
,这个文件专门用来存放变量,然后在其他的文件中引入_variables.scss
即可。
因为这个文件只需要存储变量,并不需要它编译出对应的 css 文件,所以我们给文件名的前面加了下划线,意思是声明为局部文件。
我们在这个文件中,声明两个字体变量:
$font1: Braggadocio, Arial, Verdana, Helvetica, sans-serif;
$font2: Arial, Verdana, Helvetica, sans-serif;
(2)新建文件main.scss,在里面引入步骤(1)中的变量文件:
@import "variables"; // 引入变量文件
.div1{
font-family: $font1;
}
.div2{
font-family: $font2;
}
基于 Sass 的既定规则:
没有文件后缀名时,Sass 会自动添加 .scss 或者 .sass 的后缀(具体要看已经存在哪个后缀的文件)。
同一目录下,局部文件和非局部文件不能重名。
对应生成的main.css文件如下:
main.css
/* line 9, ../sass/main.scss */
.div1 {
font-family: Braggadocio, Arial, Verdana, Helvetica, sans-serif;
}
/* line 13, ../sass/main.scss */
.div2 {
font-family: Arial, Verdana, Helvetica, sans-serif;
}
#注释语法
单行注释:
//我是单行注释
块级注释:
/*
我是块级注释
哈哈
*/
二者的区别是:单行注释不会出现在自动生成的css文件中。
css 15-Sass入门的更多相关文章
- CSS进阶之SASS入门指南
CSS进阶之SASS入门指南 随着跟着公司学习项目的前端的推进,越来越对好奇了许久的SASS垂涎欲滴,哈哈,可能这个词使用不当,没有关系,就是对SASS有一股神秘的爱!好了,闲话不多说 ...
- Sass入门及知识点整理
Sass 快速入门 | SASS 中文网 文档链接:https://www.sasscss.com/getting-started/ 前言 之前整理了一篇关于Less的,现在就来整理一下关于Sass的 ...
- 【CSS】Sass理解
原文在 https://github.com/zhongxia245/blog , 欢迎 star! Sass理解 时间:2016-09-24 22:56:12 作者:zhongxia 这里就不讲解S ...
- Sass入门指南
转自:http://www.imooc.com/article/1413 css预处理器已经算不上一个新鲜的词了,当前比较有代表性的css预处理器有sass.less.stylus.关于三者选择问题一 ...
- sass入门
SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. SASS 官网介绍: sass is the most mature(成熟的),st ...
- inuit.css – 基于 Sass 的强大,可扩展的 CSS 框架
inuit.css 是一个强大的,可扩展的 CSS 框架,另外还是基于 Sass,面向对象的框架.inuit.css 是建立在 BEM 风格的命名约定,非常适合于想要专注于创意而不是代码的设计师以及喜 ...
- 前端编码规范(4)—— CSS 和 Sass (SCSS) 规范
CSS and Sass (SCSS) style rules ID and class naming ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称.代替表象和晦涩难懂 ...
- Sass入门:第三章
1.声明变量 Sass声明变量以美元符号"$"开头.例如: $width : 300px; 上面的例子中,Sass的变量包括三个部分: (1)声明变量的符号"$" ...
- sass入门篇
CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作. 通俗的说,“CSS ...
- sass入门(一)
一].sass入门安装sass安装koala // sass中可以自定义变量 $fontStack: Microsoft Yahei; $primaryColor: #333; body { font ...
随机推荐
- 2020阿里Java面试题目大汇总,看看你离阿里还有多远,附答案!
前言 首先说一下情况,我大概我是从去年12月份开始看书学习,到今年的6月份,一直学到看大家的面经基本上百分之90以上都会,我就在5月份开始投简历,边面试边补充基础知识等.也是有些辛苦.终于是在前不久拿 ...
- FL Studio 插件使用教程 —— 3x Osc(上)
在FL Studio20 中,3x Osc是继TS404插件之后资历最老的插件之一,也是FL Studio20 中最重要.使用率最高的插件之一.相比别的FL Studio20内置插件,3x Osc 相 ...
- PDF编辑:pdfFactory文本备注功能详解
除了word的doc文件外,PDF也是我们经常接触到的文件格式,经常需要在pdf文件上进行编辑与修改,或者给内容做提示和备注. 文件的文本备注功能可以用pdfFactory来进行,编辑打印PDF一条龙 ...
- mongodb查询前10条
mongo可以通过时间或者通过id来判断上一条记录或者下一条记录,我是通过id 前10条 db.数据库名称.find({ '_id': { '$lt': ids } }).sort({_id: -1} ...
- [LGOJ1273]有线电视网
solution 用了一个很有意思的转移方法. $dp[i][j] $ 表达 \(i\) 作为根,\(j\)个终端时最大的收益,即钱数,当\(0\leq dp[1][i]\)时,即以1为根可以转移到\ ...
- JavaSE 学习笔记02丨对象与类
Chapter 4. 对象与类 4.1 面向对象程序设计概述 面向对象程序设计(简称OOP),是当今主流程序设计范型.面向对象的程序是由对象组成的,每个对象(来自于标准库或自定义的)包含对用户公开的特 ...
- 通过Consul Raft库打造自己的分布式系统
通用的CP系统有etcd和consul, 通用的对立面就是专用系统. 所以在某些场合是有这种需求的. 然而etcd embed的可用性极差, Windows上面跑会出现各种问题, 而且不能定制协议, ...
- 一篇文章彻底搞懂Java的大Class到底是什么
作者在之前工作中,面试过很多求职者,发现有很多面试者对Java的 Class 搞不明白,理解的不到位,一知半解,一到用的时候,就不太会用. 因为自己本身以前刚学安卓的时候,甚至做安卓2,3年后,也是对 ...
- 知识点:C语言进阶提高篇,自定义数据类型:枚举
一.枚举的概念 枚举是C语言中的一种基本数据类型,并不是构造类型,它可以用于声明一组常数.当一个变量有几个固定的可能取值时,可以将这个变量定义为枚举类型.比如,你可以用一个枚举类型的变量来表示季节,因 ...
- IPSec传输模式/隧道模式下ESP报文的装包与拆包过程
IPSec协议:IPsec将IP数据包的内容先加密再传输,即便中途被截获,由于缺乏解密数据包所必要的密钥,攻击者也无法获取里面的内容. 传输模式和隧道模式:IPsec对数据进行加密的方式有两种:传输模 ...