文档章节

SASS

大仁孙
 大仁孙
发布于 2016/07/22 14:54
字数 659
阅读 5
收藏 0

一、sass的安装

        sass安装博客网址:http://my.oschina.net/sundaren/blog/716055

二、准备和监听

1. sass的文件后缀名 :  .scss(意思为Sassy CSS)

2.sass文件的转化:

//文件名为test的sass文件转化为test文件名的css
 $   sass test.scss test.css

3.提供四个编译风格的选项:

  * nested:嵌套缩进的css代码,它是默认值。
  * expanded:没有缩进的、扩展的css代码。
  * compact:简洁格式的css代码。
  * compressed:压缩后的css代码。

生产环境当中,用第四种代码压缩

sass --style compressed test.sass test.css

4.SASS监听某个文件或目录

  // watch a file
  sass --watch test.scss:test.css
  // watch a directory
  sass --watch app/sass:public/stylesheets

三、基本语法

1.变量

SASS允许使用变量,所有变量以$开头。

  $blue : #1875e7; 

  div {
   color : $blue;
  }

如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。

  $side : left;

  .rounded {
    border-#{$side}-radius: 5px;
  }

2.计算功能

SASS允许在代码中使用算式:

  body {
    margin: (14px/2);
    top: 50px + 100px;
    right: $var * 10%;
  }

 3.嵌套

SASS允许选择器嵌套。比如,下面的CSS代码:

  div h1 {
    color : red;
  }

可以写成:

  div {
    h1 {
      color:red;
    }
  }

属性也可以嵌套,比如border-color属性,可以写成:

  p {
    border: {
      color: red;
    }
  }

注意,border后面必须加上冒号。

在嵌套的代码块内,可以使用&引用父元素。比如a:hover伪类,可以写成:

  a {
    &:hover { color: #ffb3ff; }
  }

4.注释

SASS共有两种注释风格。

标准的CSS注释 /* comment */ ,会保留到编译后的文件。

单行注释 // comment,只保留在SASS源文件中,编译后被省略。

在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。

  /*! 
    重要注释!
  */

 三、代码重写

1.继承

SASS允许一个选择器,继承另一个选择器。比如,现有class1:

  .class1 {
    border: 1px solid #ddd;
  }

class2要继承class1,就要使用@extend命令:

  .class2 {
    @extend .class1;
    font-size:120%;
  }

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); }

 

© 著作权归作者所有

共有 人打赏支持
上一篇: Less
下一篇: SASS入门-安装
大仁孙
粉丝 3
博文 35
码字总数 26287
作品 0
虹口
前端工程师
私信 提问
SASS 初学者入门

Sass 是什么? Sass 是Syntactically Awesome Stylesheete Sass的缩写,是由Hampton Catlin开发的。 Sass可以简化你的Css工作流,并可以使你的Css的扩展和维护工作变的更加容易! 例如,曾几...

傅小黑
2013/01/19
44.2K
25
Sass和Compass的安装介绍

PS: 本文操作均在Windows下 Sass Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言,它诞生于2007年 Sass 是一门高于 CSS 的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通 CSS ...

假行僧396741
2017/01/14
0
0
win8 64 位下安装sass

win8 64 位下安装sass: 先下载rubby安装(http://rubyinstaller.org/downloads/),然后再装sass C:Usersguang>gem sources --remove https://rubygems.org/ https://rubygems.org/ removed fr......

ziluopao
2016/05/28
25
0
「续集」Sass简易指南:多风格编译和运行以及文件注释

1.使用Compass创建工程 一般情况下可以在编辑器中直接创建Sass或者Scss文件。如果项目比较复杂那么我们可以使用Compass创建工程,命令如下: compass create 这样创建出的项目会自带几个文件夹...

GeCoder
2018/04/24
0
0
compass&sass高级应用

一./背景知识/ 1.Sass是什么?   Sass可以简化你的Css工作流,并可以使你的Css的扩展和维护工作变的更加容易!例如,曾几时何,因为客户的需求的变更,你必须不断的通过查找和替换来更改一...

Billydotzhang
2016/10/27
5
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周四乱弹 —— Im fine

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @LuckyXu:分享戴荃的单曲《小荃拳之歌》: 手机党少年们想听歌,请使劲儿戳(这里) 今天遇到倒霉事了, @ FalconChen :电梯宕机了我靠 但是...

小小编辑
59分钟前
129
9
【转载】uclibc和glibc的差别

转载自:http://blog.163.com/huangnan0727@126/blog/static/30626184201042022011225/ CC的标准库,就是glibc这个库,里面有GCC各种标准函数的实现,还有各种unix系的函数在里面。 当初创建...

shzwork
今天
3
0
关于360插件化Replugin Activity动态修改父类的字节码操作

近期在接入360插件化方案Replugin时,发现出现崩溃情况。 大概崩溃内容如下: aused by: java.lang.ClassNotFoundException: Didn't find class "x.x.x.xActivity" on path: 我自己在插件代码......

Gemini-Lin
今天
2
0
mybatis缓存的装饰器模式

一般在开发生产中,对于新需求的实现,我们一般会有两种方式来处理,一种是直接修改已有组件的代码,另一种是使用继承方式。第一种显然会破坏已有组件的稳定性。第二种,会导致大量子类的出现...

算法之名
昨天
22
0
单元测试

右键方法 Go To --> Test,简便快速生成测试方法。 相关注解 @RunWith(SpringRunner.class) 表示要在测试环境中跑,底层实现是 jUnit测试工具。 @SpringBootTest 表示启动整个 Spring工程 @A...

imbiao
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部