SASS学习笔记(一)

一、为什么使用SASS

CSS不是编程语言,没有变量、条件语句等等,只是单纯的描述,因此为CSS加入编程元素(即“CSS预处理器”)。其基本思想:用一种专门的编程语言进行网页设计,然后再编译成CSS文件。SASS作为其中一种“CSS预处理器”,有许多优点(便利的写法,节省时间,就像JS中的jQuery;简单、可维护),可以用来写CSS(总之就是一门写CSS的编程语言)

二、安装

类似于bootstrap是基于jQuery的,SASS是用Ruby语言写的(但是两者语法没有关联,没有Ruby的基础没关系),所以安装SASS之前必须先安装Ruby。

ps. 以下均在Windows7操作系统下

1)http://rubyinstaller.org/downloads/  下载ruby(我选择的是Ruby2.2.3(x64))

2)正常安装,选择框均全选(添加Ruby的bin文件夹到PATH用户变量和系统变量以使用 gem 命令工作。)

3)安装Ruby完毕后,win+r--cmd--enter 打开命令框,输入gem install sass,安装sass

4)不成功多试几次,安装成功即可使用sass了。

三、基本用法

1)变量,所有变量以$开头,如果变量镶嵌在字符串中,用#{}包含

$red:#f00;
$lside:left;
div{
  color:$red;
  border-#{$lside}-radius:10px;
}
2)计算功能,sass允许使用加减乘除算式
div{
  width:100px+20px;
}
3)嵌套,sass可以将css中的包含选择器写成嵌套形式
3.1) 标签嵌套
css:
div  h2{
  color:red;
}

写成sass:

div{
  h2{
    color:red;
  }
}
3.2)属性嵌套(如border-color拆开成嵌套格式:如下)注意border后有冒号(想象成将-改成了:)
div{
  border:{
    color:red;
  }
}

3.3)用&引用父元素(如a:hover改成)

a{
  &:hover{
    color:red;
  }
}
4)注释
/*    */     会保留到编译后的文件
//          单行注释,只保留在sass文件中,编译后被省略
/*!     */           重要注释,即使压缩也会也会被保留,常用于声明版权信息

四、代码重用

1)继承,sass允许一个选择器继承另一个选择器,@extend 命令

.class1{
   color : red;
}
.class2{
  @extend : .class1;
}
2)Mixin,使用@mixin 命令定义代码块,用@include 调用这个代码块
2.1)@mixin left{
  float:left;
}
div{
  @include  left;
}
2.2)用mixin指定参数和缺省值
@mixin left($value:20px){
  float:left;
  margin-left:$value;
}
div{
  @include  left(10px);
}

五、颜色函数,指定颜色并用颜色函数(主要是加深或者减淡)生成系列颜色

lighten(#f00,20%)
darken(#f00,20%)
grayscale(#f00,20%)
complete(#f00)

六、高级语法

1)插入文件,用@import命令

@import +路径

2)条件语句,@if和@else (可以将@想象成if后面的括号)

2.1)

div{
  @if width<3 {
    width:20px;
  }@else{
    width:10px;
  }
}

2.2)循环语句,@for   @while  @each  用法同上

2.3)自定义函数,@function

@function double($n){
  @return $n * 3;
}
div{
  width:double(3px);
}

参考资料:  阮一峰SASS用法指南

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术翻译

如何编写自己的jQuery插件?

对于那些不知道的人来说,jQuery是一个JavaScript库,它包含了许多特性,非常小而且速度很快。它还包括一个易于使用的API,在所有浏览器上都是兼容的,...

1771
来自专栏前端下午茶

Vue源码阅读 - 文件结构与运行机制

vue已是目前国内前端web端三分天下之一,同时也作为本人主要技术栈之一,在日常使用中知其然也好奇着所以然,另外最近的社区涌现了一大票vue源码阅读类的文章,在...

1273
来自专栏自动化测试实战

《selenium2 python 自动化测试实战》(7)——定位一组对象

3015
来自专栏守望轩

Visual Studio 2008 每日提示(二十二)

#211、在对象浏览器向前和向后导航 原文链接:The Object Browser has a navigate forward and navigate ...

3578
来自专栏木子昭的博客

css进阶 less的使用

less 官网http://lesscss.org/ ? less.png npm install -g less # 查看版本 lessc -v 编写les...

4186
来自专栏salesforce零基础学习

salesforce lightning零基础学习(二) lightning 知识简单介绍----lightning事件驱动模型

2293
来自专栏IMWeb前端团队

移动端minimvvm框架qvm实现

gitHub地址 1,移动端minimvvm框架qvm实现 qvm概念,一个适用于移动端的mini mvvm(什么是mvvm?没了解的同学自己去了解)框架。参考...

22410
来自专栏程序员互动联盟

【答疑解惑】getchar()与EOF

先看下面的代码: while((c = getchar()) != EOF){ putchar(c); } 这一段代码是The C Programming ...

3789
来自专栏软件开发

前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)

一、Vue的实例 1.1、创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue...

5617
来自专栏Ryan Miao

js基础-表单验证和提交

基础知识: 原始提交如下: 1 <form action="/login" method="post" id="form1"> 2 <span>用户<...

6475

扫码关注云+社区

领取腾讯云代金券