SASS 初学者入门
SASS 初学者入门
Sass 是什么?
Sass 是Syntactically Awesome Stylesheete Sass的缩写,是由Hampton Catlin开发的。
Sass可以简化你的Css工作流,并可以使你的Css的扩展和维护工作变的更加容易!
例如,曾几时何,因为客户的需求的变更,你必须不断的通过查找和替换来更改一个像素值,或者,为了能够确定多栏布局中某一栏的宽度,你需要使用计算像素值软件才能搞定。
Sass引入了一些新的概念如,变量,混合,嵌套和选择器继承。
Sass看起来似乎和css很像,但它没有分号和大括号。
以下是css的表示:
#skyscraper_ad
{
display: block;
width: 120px;
height: 600px;
} #leaderboard_ad
{
display: block;
width: 728px;
height: 90px;
}
在sass中将会这样写:
#skyscraper_ad
display: block
width: 120px
height: 600px #leaderboard_ad
display: block
width: 728px
height: 90px
Sass用两个空格缩进来定义代码的嵌套。
通过以上的展示,你已经了解了Sass怎么书写,接下来看一下一些让sass变的如此神奇的一些东西。
变量 $red: #FF4848
在Sass中,可以使用像darken和lighten函数来修改变量值。
在下面的例子中,p标签中的red将会比h1中的red更深。
$red: #FF4848
$fontsize: 12px
h1
color: $red p
color: darken($red, %)
你能够运用‘加’或‘减’操作符来对相同类型的变量进行运算,如果我们想要手动的轻微的加深一个颜色值,可以通过'-'来减去#,同样我们可以通过‘+’来将字体值增大10px。
p.addition_and_subtraction
color: $red - #
font-size: $fontsize + 10px
嵌套
嵌套可以分为两种类型:
选择器嵌套
选择器嵌套是第一种类型嵌套。
sass中的嵌套和html中的嵌套是相似的。
$fontsize: 12px .speaker
.name
font:
weight: bold
size: $fontsize + 10px
.position
font:
size: $fontsize
如果你看一下编译后生成的css,你将会看见嵌套的.speaker类下的.name类生成的css选择器:.speaker .name。
.speaker .name {
font-weight: bold;
font-size: 22px; }
.speaker .position {
font-size: 12px; }
属性嵌套
“属性嵌套”是第二种类型的嵌套。
你可以嵌套带有相同前缀的属性。
$fontsize: 12px .speaker
.name
font:
weight: bold
size: $fontsize + 10px
.position
font:
size: $fontsize
从以上的例子中可以看出,我们让font:另起一行,并且给了两个空格的缩进,然后,就可以设置原来带连字符的属性了。
所以当我们以上面的格式书写font的属性weight时,这种格式会自动生成css属性font-weight:
.speaker .name {
font-weight: bold;
font-size: 22px; }
.speaker .position {
font-size: 12px; }
所有带连字符的选择器都支持以上格式。
像这种类型的嵌套对于你组织和结构化你的css是一种神奇的方法,同时,它还可以减少没有必要的代码重复。
混合
混合是另一种让人着迷的Sass特性。
混合能够使你重用一整段Sass代码,你甚至能够给他们传递参数,同时,你还能够确定默认的值,这也是十分酷的!
定义一个混合,需要用到@mixin关键字,后面跟上你为混合选择的名字。如果你需要一些参数,在名字后面,添加一对括号,并在括号中定义你的参数变量。如果你需要默认值,可以再参数后面添加冒号和你想要的默认值。
使用混合是容易的,通过调用@includSass关键字,后面跟着混合名和用括号包含的参数值。
下面是例子:
@mixin border-radius($amount: 5px)
-moz-border-radius: $amount
-webkit-border-radius: $amount
border-radius: $amount h1
@include border-radius(2px) .speaker
@include border-radius
上面的Sass将会编译生成如下的css:
h1 {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2x; } .speaker {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; }
在以上例子中,我们给h1中的radius中设定了值,而.speakr中,因为没有设定值,所以radius中的值为默认值。
We specified the radius inh1, but for the.speakerwe didn’t specify anything, therefore the default of5pxis used.
选择器继承
选择器继承能够让你实现选择器可以继承其他选择器中的所有样式,这也是让人欲罢不能的!
为了能够实现它,需要使用@extend关键字,后面跟着你想要继承的选择器,这样,想要继承的选择器中的样式都会在被继承选择器中实现。
h1
border: 4px solid #ff9aa9 .speaker
@extend h1
border-width: 2px
上面的将会编译为如下的css
h1, .speaker {
border: 4px solid #ff9aa9; } .speaker {
border-width: 2px; }
安装使用
Sass是一个Ruby gem,假如以前你的机子中装有Ruby gem,很容易在机子中安装Sass。
Sass 能被用作为一个命令行工具,将你的Sass文件编译成css文件。
你能做这个通过定义Sass类型——监控
sass_文件夹:样式列表_文件夹中包含着sass文件夹和样式列表文件夹,sass文件夹中包含的sass文件后缀名必须为.sass,样式列表文件夹中包含的是你的输出文件夹。监控选项的选择意味着如果你对文件作任何改变,一旦你保存他们,文件将会自动转变。
SASS 初学者入门的更多相关文章
- Sass初学者超强十分钟入门
ruby安装 因为sass依赖于ruby环境,所以装sass之前先确认装了ruby.先导官网下载个ruby 在安装的时候,请勾选Add Ruby executables to your PATH这个选 ...
- wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- [[其他教程]] 2015年最新版iOS基础视频_最适合初学者入门
主讲:孙庆虎类型:iOS 适合对象:初学者入门视频介绍:本视频是iOS学院精心录制的免费精华版iOS语言基础视频,该视频特点在于最大程度保证了知识点的完整性,按知识点进行视频录制,每个视频控制在20分 ...
- 【转】BLE_CC2540_初学者入门指导
原文网址:http://www.deyisupport.com/question_answer/wireless_connectivity/bluetooth/f/103/t/61462.aspx 看 ...
- 极客技术专题【007期】:jQuery初学者入门 - jQuery Event
日期:2013-8-19 来源:GBin1.com 技术专题介绍 专题:jQuery初学者入门[第三讲:jQuery Event] 分享人:极客标签技术编辑 -Lana (请站内关注分享人) 授课时 ...
- 强烈推荐visual c++ 2012入门经典适合初学者入门
强烈推荐visual c++ 2012入门经典适合初学者入门 此书循序渐进,用其独特.易于理解的教程风格来介绍各个主题,无论是编程新手,还是经验丰富的编程人员,都很容易理解. 此书的目录基本覆盖了Wi ...
- laravel 中CSS 预编译语言 Sass 快速入门教程
CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量.函数.继承等机制,因此很容易写出大量没有逻辑.难以复用和扩展的代码,在日常开发使用中,如果没 ...
随机推荐
- CodeForces 279D The Minimum Number of Variables 题解
题目大意: 有一组n个不相同的数字组成数串:a1,a2,a3-an. 1.一个数组b. 2.第一个操作我们将b0的值赋为a1.之后我们有n-1个操作,第k次操作我们将by=bi+bj(y,i,j可能相 ...
- 团队Git工作流总结
为什么使用Git “svn用了这么多年都好好的,为啥折腾搞Git?” “Git一点都不好用,提交个代码都提交不上去!” “Git这么复杂,命令多到记不住,而且完全用不到.哪有svn简单好用?” 推 ...
- webform 简单控件
html中12个表单元素添加runat="server"后称为控件 Lable 编译之后是 <span></span> 属性:CssClass 编译成 c ...
- Winform TextBox中只能输入数字的几种常用方法(C#)
方法一: private void tBox_KeyPress(object sender, KeyPressEventArgs e) { ; //禁止空格键 )) return; //处理负数 if ...
- FK JavaScript之:ArcGIS JavaScript API之地图动画
地图要素动画应用场景:动态显示地图上的要素的属性随着时间的改变而改变,并根据其属性的变化设置其渲染.比如:某水域项目中,随着时间的变化,动态展现水域的清淤进度 本文目的:对ArcGIS JavaScr ...
- NeoKylin5.6下安装部署达梦(DM7)数据库
1.准备操作系统 1.1 系统登录界面 1.2 操作系统版本信息 [root@jdbh ~]# uname -ra Linux jdbh -.el5xen # SMP Fri Jul :: EDT x ...
- IOS网络第二天 - 06-POST请求
************POST请求 #import "HMViewController.h" #import "MBProgressHUD+MJ.h" @in ...
- 在Windows下使用Git
关于Git git是当今最流行的版本控制系统,因为是诞生在Linux操作系统下,因此Linux对git天生有最好的支持,但好在各路大牛的努力下,目前在Windows也能较为完美的使用.以下便是我使用g ...
- buyexpressv6
<script type="text/javascript"> var is_enabled = -1; var checkSubmitFlg = false; var ...
- find_elements后点击不了抓取的元素
1.莫名其妙抓不到元素,要去看句柄,是不是没有切换 h=driver.current_window_handle nh=driver.window_handles for i in nh: if i! ...