SCSS(SASS、CSS)学习
看的这篇文章 http://www.frostsky.com/2014/07/sass-scss/ 写的还比较清晰
SASS是CSS3的一个扩展,增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的工具或WEB框架插件把它转换成标准的、格式良好的CSS代码。
SCSS即是SASS的新语法,是Sassy CSS的简写,是CSS3语法的超集,也就是说所有有效的CSS3样式也同样适合于SASS。
SASS与SCSS的区别如下:
Sass 有两种语法规则(syntaxes),目前新的语法规则(从 Sass 3开始)被称为 “SCSS”( 时髦的css(Sassy CSS)),它是css3语法的的拓展级,
就是说每一个语法正确的CSS3文件也是合法的SCSS文件,SCSS文件使用.scss作为拓展名。 第二种语法别成为缩进语法(或者 Sass),它受到了
Haml的简洁精炼的启发,它是为了人们可以用和css相近的但是更精简的方式来书写css而诞生的。它没有括号,分号,它使用 行缩进 的方式来指定
css 块,虽然sass不是最原始的语法,但是缩进语法将继续被支持,在缩进语法的文件以 .sass 为拓展名。
以下是一些例子:
———————————
在SCSS中使用变量
———————————
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color:
darken($blue, %);
}
.border {
padding: $margin / ;
margin: $margin / ;
border-color: $blue;
}
转换成CSS如下:
/* CSS */
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}
——————————————-
SCSS嵌套:
——————————————-
table.hl {
margin: 2em ;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: .2em;
}
}
转换成CSS如下:
/* CSS */
table.hl {
margin: 2em ;
}
table.hl td.ln {
text-align: right;
}
li {
font-family: serif;
font-weight: bold;
font-size: .2em;
}
SASS文件就是普通的文本文件,里面可以直接使用CSS语法。文件后缀名是.scss,意思为Sassy CSS。
下面的命令,可以在屏幕上显示.scss文件转化的css代码。(假设文件名为test。)
sass test.scss
如果要将显示结果保存成文件,后面再跟一个.css文件名。
sass test.scss test.css
SASS提供四个编译风格的选项:
* nested:嵌套缩进的css代码,它是默认值。
* expanded:没有缩进的、扩展的css代码。
* compact:简洁格式的css代码。
* compressed:压缩后的css代码。
生产环境当中,一般使用最后一个选项。
sass –style compressed test.sass test.css
你也可以让SASS监听某个文件或目录,一旦源文件有变动,就自动生成编译后的版本。
// watch a file
sass –watch input.scss:output.css
// watch a directory
sass –watch app/sass:public/stylesheets
基本用法
3.1 变量
SASS允许使用变量,所有变量以$开头。
$blue : #1875e7;
div {
color : $blue;
}
如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
3.2 计算功能
SASS允许在代码中使用算式:
body {
margin: (14px/);
top: 50px + 100px;
right: $var * %;
}
3.3 嵌套
SASS允许选择器嵌套。比如,下面的CSS代码:
div h1 {
color : red;
}
可以写成:
div {
hi {
color:red;
}
}
属性也可以嵌套,比如border-color属性,可以写成:
p {
border: {
color: red;
}
}
注意,border后面必须加上冒号。
在嵌套的代码块内,可以使用$引用父元素。比如a:hover伪类,可以写成:
a {
&:hover { color: #ffb3ff; }
}
3.4 注释
SASS共有两种注释风格。
标准的CSS注释 /* comment */ ,会保留到编译后的文件。
单行注释 // comment,只保留在SASS源文件中,编译后被省略。
在/*后面加一个感叹号,表示这是”重要注释”。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。
/*!
重要注释!
*/
四、代码的重用
4.1 继承
SASS允许一个选择器,继承另一个选择器。比如,现有class1:
.class1 {
border: 1px solid #ddd;
}
class2要继承class1,就要使用@extend命令:
.class2 {
@extend .class1;
font-size:%;
}
4.2 Mixin
Mixin有点像C语言的宏(macro),是可以重用的代码块。
使用@mixin命令,定义一个代码块。
@mixin left {
float: left;
margin-left: 10px;
}
使用@include命令,调用这个mixin。
div {
@include left;
}
mixin的强大之处,在于可以指定参数和缺省值。
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
使用的时候,根据需要加入参数:
div {
@include left(20px);
}
下面是一个mixin的实例,用来生成浏览器前缀。
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
使用的时候,可以像下面这样调用:
#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
4.3 颜色函数
SASS提供了一些内置的颜色函数,以便生成系列颜色。
lighten(#cc3, %) // #d6d65c
darken(#cc3, %) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
4.4 插入文件
@import命令,用来插入外部文件。
@import “path/filename.scss”;
如果插入的是.css文件,则等同于css的import命令。
@import “foo.css”;
五、高级用法
5.1 条件语句
@if可以用来判断:
p {
@if + == { border: 1px solid; }
@if < { border: 2px dotted; }
}
配套的还有@else命令:
@if lightness($color) > % {
background-color: #;
} @else {
background-color: #fff;
}
5.2 循环语句
SASS支持for循环:
@for $i from to {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
也支持while循环:
$i: ;
@while $i > {
.item-#{$i} { width: 2em * $i; }
$i: $i – ;
}
each命令,作用与for类似:
@each $member in a, b, c, d {
.#{$member} {
background-image: url(“/image/#{$member}.jpg”);
}
}
5.3 自定义函数
SASS允许用户编写自己的函数。
@function double($n) {
@return $n * ;
}
#sidebar {
width: double(5px);
}
SCSS(SASS、CSS)学习的更多相关文章
- Webpack干货系列 | 怎么运用 Webpack 5 处理css/scss/sass、less、stylus样式资源
程序员优雅哥简介:十年程序员,呆过央企外企私企,做过前端后端架构.分享vue.Java等前后端技术和架构. 本文摘要:主要讲解webpack 5 如何高效处理CSS 资源.scss/sass 资源.l ...
- sass个人学习笔记
Materliu 在慕课的视频: http://www.imooc.com/learn/364 . http://www.imooc.com/wiki/371 sass入门:http://www.w3 ...
- sass基础学习(一)
移动端布局各种问题 pc端布局各种问题sass 组件模块化面向对象编程ajax 框架学习 webpack 打包 性能优化 gulp是基于Nodejs的自动任务运行器她能自动化地完成 javascrip ...
- sass的学习笔记
sass初学入门笔记(一) 我本身是个新手,一边学sass一边记下的笔记,可能有点罗嗦,但是复习起来的话还是比较全面直观的.当然,最重要的还是去实践,实践得真理 其它 CSS 预处理器语言: CSS ...
- Sass的学习
第一章:Sass简介 一. 什么是CSS预处理器 定义:CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用 ...
- 如何使用scss/sass
SCSS 与 Sass 异同:http://sass.bootcss.com/docs/scss-for-sass-users/: 欢迎加入前端交流群来py: 转载请标明出处! 废话不多说,直接进入正 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- css学习归纳总结(三) 转
原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...
- css学习归纳总结(二) 转
原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...
- css学习归纳总结(一) 转
原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性 ...
随机推荐
- [工作积累] Android system dialog with native callback
JNI: invoke java dialog with native callback: store native function address in java, and invoke nati ...
- 亚马逊 在线测试题目 amazon (变种的)三叉树的最近公共祖先问题
题目意思就是找一棵按上面链接所示的树对应的上面的两个点的最小公共祖先(LCP,Least Common Father),按照比较大小来依次返回自己的父亲节点就行了.具体看代码:getfather(a) ...
- .NET设计模式(8):适配器模式(Adapter Pattern)(转)
概述 在软件系统中,某些类型由于自身的逻辑,它具有两个或多个维度的变化,那么如何应对这种“多维度的变化”?如何利用面向对象的技术来使得该类型能够轻松的沿着多个方向进行变化,而又不引入额外的复杂度?这就 ...
- Sqlite中使用rowid来表示行号,用于分页。
在SQLite的查询结果中显示行号,可以使用select rowid as RowNumber ,* from WSCLanguage: select rowid as RowNumber ,* fr ...
- HDOJ 1226 超级密码
超级密码 Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- const int *p与int *const p的区别(转:csdn,suer0101)
本文只是一篇学习笔记,是看了<彻底搞定C指针>中的相关篇幅后的一点总结,仅此而已! 一.先搞清const int *p与int const *p的区别 它们的区别就是:没有区别!! 无论谁 ...
- Xmarks丢失书签
想体验下Xmarks,不同浏览器同步书签,听说很好用,就安装Chrome插件,没想到竟然把我的所有书签都丢了. 不过在网上找到了回复的办法,也很简单: 原始地址:http://irising.me/2 ...
- Python - 装饰器使用过程中的误区
曾灵敏 - APRIL 27, 2015 装饰器基本概念 大家都知道装饰器是一个很著名的设计模式,经常被用于AOP(面向切面编程)的场景,较为经典的有插入日志,性能测试,事务处理,Web权限校验, C ...
- NSArray block用法
28.使用block 块遍历整个数组.这个block 需要三个参数,id obj 表示数组中的元素. NSUInteger idx 标示元素的下标, bool *stop 是一个bool类型的参数. ...
- line-height 与垂直居中!
在此之前,对于line-height 与垂直居中的问题,经常碰到. 比如,图片与span在同一个box中的时候,竟然会各种偏移.要想达到理想的效果真的是各种难. 有时间,决定认真的啃一啃. 一 lin ...