【css预处理器】------sass的基本语法------【巷子】
001、安装sass
1、删除gem源:gem sources --remove https:
//rubygems
.org/ 2、添加国内源:
gem sources -a http:
//gems
.ruby-china.org/
3、打印是否替换成功:gem sources -l 4、安装sass:gem install sass Linux和Mac已自带Ruby,不用再安装,mac同学安装:sudo gem install sass
gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/
002、sass的四种编译风格
nested:嵌套缩进的css代码,它是默认值。
expanded:没有缩进的、扩展的css代码。
compact:简洁格式的css代码。
compressed:压缩后的css代码。
003、编译sass
1、单个文件编译:sass 文件名:文件名 2、编译整个文件夹:sass 文件夹名:文件夹名 3、监听编译:sass --watch 文件名:文件名 4、压缩加编译:sass --watch test.scss:test.css --style nested 5、编译整个文件夹:
sass sass/:css/
004、sass的基本语法
1、sass中定义变量用$
1、普通变量和默认变量 普通变量定义了后可在全局使用
默认变量仅需要在值后面加!default
2、如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中 3、局部变量只能在局部使用,全局变量可以在任何地方使用
2、嵌套
选择器嵌套:
ul{
li{
color:red;
&:hover a{
color:#000;
}
} } &:代表父级
3、混合宏
作用:可以重用代码块 声明混合宏:@mixin 调用混合宏:@include 1、不带参数的混合宏
4、继承
在sass中,通过继承可以减少重复的代码,让一个选择器继承另一个选择器的样式 方法:@extend .alert{font-size:18px;} .alert a{
text-align:center;
&:hover{
color:red;
}
} div{@extend .alert}
5、@import
@import:引入其他文件 例如:reset文件 公共文件的引入:命名规范是以下划线开头的,这样的 scss 文件不会被编译成 css _base.scss文件 @import "base";
未完待续.......
【css预处理器】------sass的基本语法------【巷子】的更多相关文章
- css预处理器sass学习
SASS 叫做css预处理器,他的基本思想是用一门专门的编程语言来进行页面样式的设计,然后在编译成正常的css文件. Sass的用法 安装 sass是用ruby语言写的,所以我们在安装sass之前要先 ...
- 前端CSS预处理器Sass
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- css预处理器sass使用教程(多图预警)
css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...
- 关于前端CSS预处理器Sass的小知识!
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- 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和LESS)
Sass框架应用Sass简介 Sass又名SCSS,是CSS预处理器之一,它能让你更好更轻松的工作.Sass官网是这样描述Sass的:**Sass是一门高于CSS的元语言,能用来清晰的.结构化地描述文 ...
- css预处理器 sass和stylus对比以及常用功能
在众多的css预处理器语言中,sass和stylus算是十分优秀的两个.本文主要针对两者的常用功能做个简单的对比分析.在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言. 本文涉及到的sa ...
随机推荐
- [oracle] oracle-myibatis-整理
==================================== insert ========================================== 语句 <insert ...
- 第三百二十节,Django框架,生成二维码
第三百二十节,Django框架,生成二维码 用Python来生成二维码,需要qrcode模块,qrcode模块依赖Image 模块,所以首先安装这两个模块 生成二维码保存图片在本地 import qr ...
- Adobe AIR(跨平台应用)
Adobe AIR(跨平台应用)现在正式应用于android平台了,Adobe Air是一款独立的客户端应用软件,这些软件可以作为单独的程序安装使用,它可以使开发人员使用HTML.JavaScript ...
- 网络协议之socks---子网和公网的穿透
http://www.cnblogs.com/imyijie/p/4595889.html
- CentOS 7修改MySQL 5.6字符集为UTF-8
MySQL编码原因会导致数据库出现中文乱码 解决办法: 修改MySQL数据库字符编码为UTF-8,UTF-8包含全世界所有国家需要用到的字符,是国际编码. 具体操作: 1.进入MySQL控制台 mys ...
- QWidget:Must construct a QApplication before a QWidget。
异常描述: 用PyQt开发的界面程序,再新增加了几个module后, 在eric6开发环境下启动后什么都没出现,什么错误提示也都没有, 在控制台下:python XXXX.py 后显示 QWidg ...
- 配置OpenGL的开发环境
OpenGL库资源下载 http://pan.baidu.com/s/1ntVsReL 环境搭建 将下载好的文件进行解压,可以得到后缀为.h..lib..dll三类文件,对这三类文件作如下处理: 将所 ...
- 修改查看MYSQL字符集(charset)
From: http://www.cnblogs.com/fengqingtao/archive/2010/11/23/1885220.html 查看mysql的字符集 mysql> show ...
- ChemOffice Professional 16.0新增了哪些功能
ChemOffice Professional 16.0是为终极化学和生物组件设计,可满足化学家和生物学家的需求.ChemOffice Professional帮助科学家有效地检索数据库,包括SciF ...
- 图像的降采样与升采样(二维插值)----转自LOFTER-gengjiwen
图像的降采样与升采样(二维插值) 1.先说说这两个词的概念: 降采样,即是采样点数减少.对于一幅N*M的图像来说,如果降采样系数为k,则即是在原图中 每行每列每隔k个点取一个点组成一幅图像.降采样很容 ...