【WEB】Sass与Compass安装与入门(一)
2017-04-11 08:51
295 查看
在研究grunt的时候发现sass好火,作为css的编译器有必要了解一下,因此做了些小例子学习了一下,现记录如下:
一键安装,见官网。
注:在MAC系统中,安装RVM(可选:Ruby版本管理工具)和Homebrew(可选)
RVM安装:
gpg –keyserver hkp://keys.gnupg.net –recv-keys
409B6B1796C275462A1703113804BB82D39DC0E3 \curl -sSL https://get.rvm.io| bash -s stable
Homebrew安装:
/usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”
2.修改ruby软件包的sources
由于国内网络原因,导致rubygems.org放在亚马逊上的资源文件经常连接失败,所以换用国内淘宝提供的rubysources。
首先移除掉rubygems.org:
一.SASS与COMPASS简介与安装
1.安装Ruby:一键安装,见官网。
注:在MAC系统中,安装RVM(可选:Ruby版本管理工具)和Homebrew(可选)
RVM安装:
gpg –keyserver hkp://keys.gnupg.net –recv-keys
409B6B1796C275462A1703113804BB82D39DC0E3 \curl -sSL https://get.rvm.io| bash -s stable
Homebrew安装:
/usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”
2.修改ruby软件包的sources
由于国内网络原因,导致rubygems.org放在亚马逊上的资源文件经常连接失败,所以换用国内淘宝提供的rubysources。
首先移除掉rubygems.org:
gem sources --remove https://rubygems.org/[/code]
添加淘宝源:RubyGems 镜像的管理工作以后将交由 Ruby China 负责,参考http://gems.ruby-china.org/$ gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/ $ gem sources -l https://gems.ruby-china.org # 确保只有 gems.ruby-china.org
由于Ruby缺少SSL证书,因此要先按照以下网址要求进行配置,否则将无法安正确安装:
https://gist.github.com/fnichol/867550
3.安装sass:gem install sass
注:常用gem 命令 :gem update //更新所有包版本 ; gem uninstall sass –version=3.3.0//删除特定版本的sass
4.sass的简单使用
编译sass,第二个参数代表要编译的文件,后一个参数代表生成文件名:
注:一般不直接使用sass命令进行编译,常采用compass
5.compass的安装gem install compass
6.compass的简单实用compass create learncss
生成的项目目录如下图:二.SASS的主要语法
以下只记录核心语法,其他参见官网:http://sass-lang.com/documentation/file.SASS_REFERENCE.html
1.实时监听sass的变化:
2.变量语法
在screen.scss中:$headline-ff:Braggadocio,Arial,Verdana,Helvetica; $main-sec-ff:Arial,Verdana,Helvetica,sans-serif; @import "compass/reset";//compass提供的重置模块,通过重新定义标签样式来修改浏览器的默认样式。后期将改用Normalize插件,统一不同浏览器的样式差异。 .headline{ font-family:$headline-ff; } .main-sec{ font-family:$main-sec-ff; }
import的使用: 新建一个文件— _variables.scss来存放变量,通过@import “variables” 引入。
注:不建议使用CSS原生的import指令。
基于sass的既定规则:
1.没有文件名后缀的时候,sass会添加.scss或者.sass后缀。
2.同一个目录下,局部文件和非局部文件不能重名。
3.可以通过逗号分离包: @Import “variables”,”compass/reset”
3.注释:
4.嵌套样式//样式的嵌套 .main-sec{ font-family:$main-sec-ff; .headline{ //属性的嵌套 font:{//不要漏掉冒号 family:$main-sec-ff; size:16px; } } .detail{ font-size:12px; } }
编译出的CSS结果为:
5.变量操作
有两种方式可以操作变量,一种方式是直接操作变量,即变量表达式。另一种方式是通过函数。
函数有两种方式,一种是跟代码无关的函数,多是自己的内置函数,称functions,另一种是可重用的代码块,成mixin,通过@include的方式调用,另一种以组合声明的方式调用,使用@extend。
6.颜色表示
H:0-360;S:0-100% L:0-100%p{ color:hsl(270,100%,50%) }
7.mixin的使用
界面中相同的组建可以抽象成mixin模块使用。
新建_mixin.scss@mixin col-6{ width:50%; float:left; }
在screen.scss中,import “mixin”.webdemo-sec{ @include col-6(); &:hover{ background-color:f5f5f5; } }
编译后的css文件如下:
注:mixin不调用的时候,不会输出任何的文件,调用的时候也只会在相应的地方生成。
mixin传参:@mixin col($width:50%){//支持默认传参 width:$width; float:left; }
screen.scss.webdemo-sec{ @include col-6(50%);//传入参数 &:hover{ background-color:f5f5f5; } }
8.extend
用一个选择器去计算另一个选择器的样式。.error{ color:#f00; } .serious-error{ @extend .error; border:1px #f00; }
注:
@extend可以继承多个选择器
extend不可以继承选择器序列
仅用于集成的类 %error{ }
9.@media query
sass中的media query可以内嵌在css规则中,在生成css的时候,media query才会被提到样式的最高级。好处是避免了重复书写选择器或者打乱样式表的流程。@mixin col-sm($width:50%){ @media(min-width:768px){//当屏幕宽度大于768的时候,将以50%的宽度显示,当宽度小于768的时候,默认以100%的宽度显示。 width:$width; float:left; } }
9.at-root
由于嵌套过多会影响css渲染的效率,因此
@at-root{
….
}
相关文章推荐
- 【WEB】Sass与Compass安装与入门(二)
- 超轻量级Web服务器Mongoose:安装与入门使用
- sass、less和stylus的安装使用和入门实践
- Sass和Compass入门
- sass-compass 安装
- SASS/Compass的安装与卸载
- 使用 TreeView IE Web 控件(安装、入门、高级)
- Sass学习之路:Sass、Compass安装与命令行
- 浅谈J2EE WEB入门及tomcat的安装和使用
- Windows8.1 64位 安装 Ruby Sass Compass
- Windows下安装sass和compass失败的解决办法
- SASS/Compass的安装与卸载
- sass、less和stylus的安装使用和入门实践
- Sass和compass 安装 和配合grunt实时显示 [Sass和compass学习笔记]
- Sass&Compass安装和使用
- Selenium2(webdriver)入门之TestNG的安装与简单使用
- Linux入门之web服务(五)----LAMP编译安装详解,过把瘾
- Openstack安装部署工具-Compass入门介绍
- 【CSS】Windows下安装sass和compass失败的一个解决办法
- TestNG 安装及使用入门(webDriver+java环境)