文档章节

SASS的使用总结

小星星_cjx
 小星星_cjx
发布于 2017/08/09 11:46
字数 894
阅读 17
收藏 0

1、简介:

    成熟、稳定、强大的专业级CSS扩展语言

2、特点:

  • 兼容CSS
  • 特性丰富
  • 成熟
  • 行业认可
  • 社区庞大
  • 框架(有无数的框架使用Sass构建。比如CompassBourbon,和Susy。)

3、安装:

    sass是基于Ruby语言开发而成,因此需要先安装Ruby。网上有很多安装教程,这里省略。。。

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言

4、编译器:

    koala(推荐)

5、语法:

(1)使用变量:

    sass的变量必须是$开头,后面紧跟变量名,而变量值和变量名之间就需要使用冒号(:)分隔开(就像CSS属性设置一样),如果值后面加上!default则表示默认值。

//sass style
//-------------------------------
$fontSize: 12px;
body{
    font-size:$fontSize;
}

//css style
//-------------------------------
body{
    font-size:12px;
}

(2)嵌套CSS规则

    选择器嵌套:

        在一个选择器中嵌套另一个选择器来实现继承,从而增强了sass文件的结构性和可读性。

        在选择器嵌套中,可以使用&表示父元素选择器

//sass style
//-------------------------------
#top_nav{
  line-height: 40px;
  li{
    float:left;
  }
  a{
    color: #fff;
    &:hover{
      color:#ddd;
    }
  }
}

//css style
//-------------------------------
#top_nav{
  line-height: 40px;
}  
#top_nav li{
  float:left;
}
#top_nav a{
  color: #fff;
}
#top_nav a:hover{
  color:#ddd;
}

    属性嵌套:

        有些属性拥有同一个开始单词,如border-width,border-color都是以border开头。

//sass style
//-------------------------------
.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}

//css style
//-------------------------------
.fakeshadow {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
  border-right-width: 2px;
  border-right-color: #ccc; 
}

(3)导入SASS文件:

    sass的导入(@import)规则和CSS的有所不同,编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import 'reset.css',那效果跟普通CSS导入样式文件一样,导入的css文件不会合并到编译后的文件中,而是以@import方式存在。

    所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头,如_mixin.scss。这种文件在导入的时候可以不写下划线,可写成@import "mixin"

(4)静默注释:

    sass有两种注释方式,一种是标准的css注释方式/* */,另一种则是//双斜杆形式的单行注释,不过这种单行注释不会被转译出来。

(5)混合器:

    使用 @mixin 标识符定义,通过 @include 来使用混合器:

//sass style
//----------------------------
@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}
ul.plain {
  color: #444;
  @include no-bullets;
}

//css style
//------------------------------
ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

(6)选择器继承:

    通过 @extend 语法实现:

//sass style
//----------------------------
.error{
  color: red;
}
.msg{
  @extend .error;
  font-size: 20px;
}

//css style
//----------------------------------
.msg{
  color: red;
  font-size: 20px;
}

SASS和SCSS的关系与区别:

sass和scss其实是一种东西,都是Sass的语法格式。scss是Sass3引入的新语法。两者不同之处有以下两点:

1、文件扩展名不同,Sass是以“.sass”后缀为扩展名,而Scss是以“.scss”后缀为扩展名。

2、语法书写方式不同,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;
}

 

© 著作权归作者所有

上一篇: 前端面试题集锦
下一篇: 小鹰会2.0
小星星_cjx
粉丝 1
博文 35
码字总数 31189
作品 0
深圳
前端工程师
私信 提问
Sass学习总结

Sass作为CSS的一种延伸,我知道之后内心一直十分喜悦。 Sass可以做运算,可以配置,可以嵌套,非常灵活。 写在前面! compass是基于SASS二次开发的工具。 1、SASS最后是生成CSS!!! 2、SAS...

Asktao
2016/02/01
43
0
SASS 用法指南

学过CSS的人都知道,它不是一种编程语言。 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有...

小编辑
2012/06/25
6.7K
13
SASS用法指南

学过CSS的人都知道,它不是一种编程语言。 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有...

阮一峰
2012/06/19
0
0
SASS入门教程及用法指南

作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家都知道,js中可以自定义变量,css仅仅是一个标记语言,不是编程语言,因此不可以自定义变量,不可以引用等等。面对这...

进步的蜗牛
2016/02/26
53
0
Sass和LESS-动态CSS技术

一、简介 二、Sass/Scss的使用 变量 注释 中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写,以及简单的样式说明。但是,你也并不希望每个浏览网站源码的人都能看到所...

dhb_oschina
2016/05/17
60
0

没有更多内容

加载失败,请刷新页面

加载更多

Java编程学习-Java虚拟机(JVM)以及跨平台原理

相信大家已经了解到Java具有跨平台的特性,可以“一次编译,到处运行”,在Windows下编写的程序,无需任何修改就可以在Linux下运行,这是C和C++很难做到的。 那么,跨平台是怎样实现的呢?这...

Java领航员
28分钟前
0
0
学JFinal不迷路,JFinal优质资源列表(欢迎反馈更新)

学JFinal不迷路,记录一下JFinal相关的资源、产品、讲师等信息(所有信息排名不分先后)。 一、相关站点: 1、JFinal官网-问答、分享、文档、交流、俱乐部 http://www.jfinal.com 2 、JFina...

山东-小木
31分钟前
0
0
项目学习(2)-order-job

在当前的系统中,因为并发量并不高,服务之间发起异步请求或者异步调用时,没有使用到消息中间件。 而是在各个服务(子系统)的数据库中,创建了event_queue事件对列表和event_handler事件处...

太猪-YJ
40分钟前
1
0
gradle grovvy中的闭包

1. 无参数的闭包 //这b1就是一个闭包def b1={ println "hello b1"}//定义方法,包含闭包类型的参数def method1(Closure closure){closure()}//执行method1method1(b1) 执行结果 ...

edison_kwok
今天
3
0
基于Spring Boot + Dubbo的全链路日志追踪(一)

一、 概要 当前公司后端整体架构为:Spring Boot + Dubbo。由于早期项目进度等原因,对日志这块没有统一的规范,基本上是每个项目自己管自己的日志。这也对后面的问题排查带来了很大的困难,...

明天以后
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部