css预处理器sass学习
SASS
叫做css预处理器，他的基本思想是用一门专门的编程语言来进行页面样式的设计，然后在编译成正常的css文件。
Sass的用法
安装
sass是用ruby语言写的，所以我们在安装sass之前要先安装ruby（ruby安装自行百度），执行下面命令安装：gem install sass
使用
sass就是普通的文本文件，后缀名为.scss。然后让我们用sass的语法写好文件之后，需要编译成.css文件才能供html文件使用（即通过link标签引入html文件），那么我们就可以使用命令行或是git工具，输入：sass test.scss test.css #假设我们的sass文件名为test
下面是一个具体编译sass的例子：
首先我们在文件夹中建上图这样的两个文件：.html、.scss
然后在两个文件中分别写入代码：
<!-- html -->
<!DOCTYPE html>
<html>
<head>
<title>css预处理器sass test</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div>一个关于css预处理器sass的小练习</div>
</body>
</html>
/* scss */
$blue:red;
div{
color:$blue;
}
然后我们在用git将scss代码编译成.css代码，将得到如下三个文件，其中一个就是我们需要的.css文件。
运行html将得到如下结果。
sass语法基础
变量
sass是有变量的概念的，所以的变量都以$开头。$blue:red; div{
color:$blue;
}
如果变量需要嵌入在字符串中，我们就必须把他们放在#{}中。
$side : right;
.rounded {
border-#{$side}-radius: 5px;
}
计算功能
sass允许代码中使用算式：$var:40;
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
嵌套
就是我们的div及标签盒子可以嵌套设置cssdiv {
p {
color:red;
}
}
属性也可以嵌套：border-color
border后面必须加冒号
div {
p {
border: {
color: red;
}
}
}
在嵌套的代码块内，可以使用&来引用父元素，如：a:hover伪类，可写为：
a {
&:hover {
color: #ffb3ff;
}
}
- 注释
和css文件注释一样 /* comment */.
代码的重用
- 继承
Sass允许一个选择器继承另一个选择器，使用@extend命令来实现：
- Mixin
Mixin有点像C语言的宏，是可以重用的代码，使用@mixin命令来定义一个代码块，在使用@include命令来调用这个mixin，就可以实现一个代码块的重用。
mixin的强大之处，在于他可以指定参数和缺省值。
使用的时候可以根据需要加入参数
css预处理器sass学习的更多相关文章
- css预处理器--sass学习（$变量名）
sass有两种形式1.scss 2.sass 一:代码的基本用法 1.变量 如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中. $side : left; .rounded { border- ...
- CSS预处理器Sass、LESS 和 Stylus
CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...
- CSS预处理器Sass(Scss)、Less、Stylus
CSS 预处理编译器能让我成程序化其的方式编写CSS代码,可以引入CSS中没有的变量.条件.函数等特性,从而让代码更简单易维护,但一般按预处理器语法编写的代码无法直接在浏览器中运行,需用通过工具比如g ...
- CSS预处理器——Sass、LESS和Stylus实践
CSS(Cascading Style Sheet)被译为级联样式表,做为一名前端从业人员来说,这个专业名词并不陌生,在行业中通常称之为“风格样式表(Style Sheet)”,它主要是用来进行网页风 ...
- CSS预处理器—Sass、LESS和Stylus
http://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html 一.什么是CSS预处器 CSS预处理器定义了一种新的语言, ...
- css预处理器 sass和stylus对比以及常用功能
在众多的css预处理器语言中,sass和stylus算是十分优秀的两个.本文主要针对两者的常用功能做个简单的对比分析.在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言. 本文涉及到的sa ...
- 前端CSS预处理器Sass
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- css预处理器sass使用教程(多图预警)
css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...
- 关于前端CSS预处理器Sass的小知识！
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
随机推荐
- Python 一键同步windows和linux数据(基于pscp.exe)
outline 项目中需要把 windows server 上的数据同步到 linux server,方法很多,这里记录下自己采用的一种比较简单的方法. 准备工作 首先确保你 windows serv ...
- 解决python中write()函数向文件中写中文时出现乱码的问题
今天看<python编程从入门到实践>的第10章文件.异常,在做练习的时候,向文件中写内容,但是写中文就不行,后来在百度上查了众多资料,解决方法如下: 解决:在open()函数中添加一个e ...
- Leetcode 之 Keys Keyboard
1. 2 Keys Keyboard 先把dp的最小不走都设置为无穷大(Integer.MAX_VALUE),初始化条件:dp[0] = dp[1] = 0,状态转移方程为dp[i] = Math.m ...
- linux c编程：读写锁
什么是读写锁读写锁其实还是一种锁,是给一段临界区代码加锁,但是此加锁是在进行写操作的时候才会互斥,而在进行读的时候是可以共享的进行访问临界区的 为什么需要读写锁有时候,在多线程中,有一些公共数据修改的 ...
- Java并发—原子类，java.util.concurrent.atomic包(转载）
原子类 Java从JDK 1.5开始提供了java.util.concurrent.atomic包(以下简称Atomic包),这个包中 的原子操作类提供了一种用法简单.性能高效.线程安全地更新一个变量 ...
- c++ 库 boost安装
http://blog.chinaunix.net/uid-12226757-id-3427282.html ubuntu apt-get install libboost-dev 全部: apt-g ...
- 基本数据类型（Day4）
一 什么是数据? eg:x=10 则10是要存储的数据 二 为什么数据要分不同的类型? 数据是用来表示不同状态的,当然不同的状态可以用不同的数据表示 三 数据类型 1.数字(整型,长整型 ,浮 ...
- python中的pass语句是什么
当用python写代码时,有时可能还没想好函数怎么写,只写了函数声明,但为了保证语法正确,必须输入一些东西,这种情况下,我们会使用pass语句 def func(*args): pass break语 ...
- ASP.NET MVC Select无限级分类选择下拉框
1:读取父级下的所有子类别 *ViewBag.ParentItemList:不能与ParentId相同 private void ParentDropDownList() { List<SAS. ...
- python图片文字识别笔记
我的环境为python3 坑比较多,在此做记录,以备查阅 命令行安装: pip install PIL pip install pytesseract pip install Pillow 下载tes ...