Sass 基础(一)
css 是一些非常简单得语句的组合,既然简单的语句,就不可避免的有很多重复的,冗余的东西,而且没有传统
编程语言变量,控制语句等高级特性,所以造成了css 编写低效,往往需要查找替换,大量复制来修改或者编写。Sass 是用
弥补这些缺陷的,使开发更加的方便快捷,更加方便管理。
1.Sass和SCSS的区别。
文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名
语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而
SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
例如:Sass语法
$font-stack: Helvetica, sans-serif //定义变量
$primary-color: #333 //定义变量
body
font: 100% $font-stack
color: $primary-color
例如:SCSS语法
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
编译出来的 CSS
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
在使用的页面时依然引用.css文件。
Sass中编译出来的样式风格可以按不同的样式风格显示。
1.嵌套输出方式nested
例如: nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
编译出来的风格:nav ul {
margin: 0;
padding: 0;
list-style: none; }
nav li {
display: inline-block; }
nav a {
display: block;
padding: 6px 12px;
text-decoration: none; }
2.展开输出方式expanded
例如: nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
编译出来的风格:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
3.紧凑输出方式 compact
例如: nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
编译出来的风格:
nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }
4.压缩输出方式compressed
例如: nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
编译出来的风格:
nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;
text-decoration:none}
声明变量用“$”开头,
$width:300px;
"$":变量声明符
width: 变量名称
300px 变量值
全局变量与局部变量
在选择器、函数、混合宏...的外面定义的变量为全局变量
例如:
.block {
color: $color;//调用全局变量
}
em {
$color: red;//定义局部变量
a {
color: $color;//调用局部变量
}
}
span {
color: $color;//调用全局变量
}
编译后:
//CSS
.block {
color: orange;
}
em a {
color: red;
}
span {
color: orange;
}
$color 就是一个全局变量,而定义在元素内部的变量,比如 $color:red; 是一个局部变量。
什么时候声明变量?
1.该值至少重复出现了两次;
2.该值至少可能会被更新一次;
3.该值所有的表现都与变量有关(非巧合)。
Sass 的嵌套分为三种:
选择器嵌套
属性嵌套
伪类嵌套
例如:在css 会这样写
nav a {
color:red;
}
header nav a {
color:green;
}
在sass中
nav {
a {
color: red;
header & {
color:green;
}
嵌套-属性嵌套
Sass中提供属性嵌套,css有一些属性前缀相同。
例如用到的样式:
.box{
border-top:1px solid red;
border-bottom:1px solid green;
}
在Sass中我们可以这样写:
.box {
border: {
top: 1px solid red;
bottom: 1px solid green;
}
}
Sass 基础(一)的更多相关文章
- [转]前端利器:SASS基础与Compass入门
[转]前端利器:SASS基础与Compass入门 SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让 ...
- Sass基础——Rem与Px的转换
rem是CSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位.不同的是em是相对于元素的父元素的font-size进行计算:rem是相对于根元素html的font-size进行计算.这样一 ...
- sass基础编写流程
这是之前整理在word上的基础流程 sass是Ruby语言开发的一个用于动态编程css文件的框架 所以sass的运行依赖Ruby环境 所以要先安装Ruby 参见详细教程(安装参照慕课网有详细的教程) ...
- 前端利器:SASS基础与Compass入门
SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让css看起来更像是一门语言,这种特性也被称为“cs ...
- Sass基础语法
Sass是CSS3语言的扩展,在CSS的基础之上添加了新特性和语法,能省事地写出更好的样式表.Sass引擎是基于Ruby的. 导入Sass文件: @import "colors" ...
- sass基础—具体编译步骤及对应命令:详细
/*基础语法*/h1{ color: red;} /*变量定义*/ $color: red; /*嵌套*/body{ header{ } footer{ }} /*mixin函数*/@mixin al ...
- Sass 基础教程
0. Sass 文件后缀名 sass 有两种后缀名文件:一种后缀名为 sass,不使用大括号和分号:另一种就是我们这里使用的 scss 文件,这种和我们平时写的 css 文件格式差不多,使用大括号和分 ...
- Sass 基础(七)
Sass Maps 的函数-map-remove($map,$key),keywords($args) map-remove($map,$key) map-remove($map,$key)函数是用来 ...
- sass基础用法
嵌套: 1.选择器嵌套: 2.属性嵌套; .box { border-top: 1px solid red; border-bottom: 1px solid green; } .bo ...
- sass笔记-3|Sass基础语法之样式复用和保持简洁
上一篇详述了Sass如何嵌套.导入和注释这3个基本方式来保持条理性和可读性,这一篇更进一步地阐述sass保持样式复用和简洁的方式--混合器和选择器继承--这两种方式都能复用样式,使用它们也不难,但一定 ...
随机推荐
- Spring Chapter4 WebSocket 胡乱翻译 (一)
4. WebSocket 包含了Servlet stack,原生WebSocket交互,通过SockJS模拟,并且通过STOMP在WebSocket之上订阅.发布消息. 4.1 简介 不扯了,看到这个 ...
- win10x系统下的Git下载安装
git安装和使用百度一下就有,官方地址https://git-scm.com/book/zh/v1/起步-安装-Git 但是说的并不是很详细,自己记录一下, 首先我们去官网下载一个git 有两个下载地 ...
- [LeetCode]27. Remove Element移除元素
Given an array nums and a value val, remove all instances of that value in-place and return the new ...
- redis的有序集合(Sorted Sets)数据类型
和Sets相比,Sorted Sets增加了一个权重参数score,使得集合中的元素能够按score进行有序排列,比如一个存储全班同学成绩的Sorted Sets,其集合value可以是同学的学号,而 ...
- BAT的java面试题
公司:国内三巨头其中的一家!面试时间约在1月份左右!基本上都是在晚上,所以不影响白天上班! 一面 一面偏架构方面 1.介绍一下自己,讲讲项目经历 2.你们项目中微服务是怎么划分的,划分粒度怎么确定? ...
- MongoDB学习之mongoose
MongoDB介绍: MongoDB是基于Javascript语言的数据库,存储格式是JSON,而Node也是基于JavaScript的环境(库),所以node和mongoDB的搭配能减少因为数据转换 ...
- Java开发高性能网站需要关注的事
转自:http://www.javabloger.com/java-development-concern-those-things/ 近期各家IT媒体举办的业内技术大会让很多网站都在披露自己的技术内 ...
- mybooklist.cn 书单de故事六月十六日
1.我的30年30本书 刘苏里书单北京万圣书园总经理,以经营人文社科类图书著称.生于1960年,1983年毕业于北京大学国际政治系,1986年毕业于中国政法大学研究生院.
- keras 保存训练的最佳模型
转自:https://anifacc.github.io/deeplearning/machinelearning/python/2017/08/30/dlwp-ch14-keep-best-mode ...
- struts1.3.10 和 hibernate 3.3.2 一起加载时 出现javax.servlet.ServletException: java.lang.NoSuchMethodError: antlr.collections.A 错误
struts1.3.10 需要导入一个 antlr-2.7.2.jar 的jar包: hibernate 3.3.2 需要导入一个 antlr-2.7.6.jar 的jar包,这两个包有冲突,所以需要 ...