!SASS学习

SASS:

http://www.sass.hk/sass-course.html   SASS  2015-10-10

http://sass.bootcss.com/docs/sass-reference/   Sass参考手册  2015-10-11

http://www.ruanyifeng.com/blog/2012/06/sass.html   阮一峰的SASS用法指南

sass文件后缀:1.scss

@charset "UTF-8";//这一句一定要写,否则utf8编码的文件,如果包含中文的,编译会出错
@mixin radius5 {//圆角
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.note1 {
  background-color: green;
  @include radius5;
}

cmd输入命令:sass 1.scss 1.css,编译结果如下:

.note1 {
  background-color: green;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px; }

/*# sourceMappingURL=1.css.map */

....

时间: 2024-11-04 08:43:51

!SASS学习的相关文章

Sass学习笔记(补充)

阅读目录 1. Sass和SCSS的区别 2. @while循环 3. @at-root 4. @content 5. 凸显注释 6. CSS输出样式 7. 重置浏览器样式 8. Sass调试和@debug命令.@warn命令 9. 使用Sass时的注意事项 相关链接:Sass学习笔记前篇 Sass关于颜色函数的乐趣 在Sass学习笔记前篇,记载了Sass安装.基本用法.编程语法,在这篇,将补充在前篇未记载的知识. 1. Sass和SCSS的区别 参考链接:http://sass.bootcss

sass学习笔记-安装

Sass安装(windows版) 在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包,大家可以到 Ruby 的官网(http://rubyinstaller.org/downloads)下载对应需要的 Ruby 版本. Ruby 安装文件下载好后,可以按应用软件安装步骤进行安装 Ruby.在安装过程中,个人建议将其安装在 C 盘下,在安装过程中选择第二个选项(不选中,就会出现编译时找不到Ruby环境的情况),如下图所示: Ruby 安装完成后,在开始菜单中找到新安装的 Ruby

sass学习笔记2

今天介绍sass在重用代码时最具威力的两个功能.一个是嵌套(Nesting),一个混合(Mixin). 我们在写CSS通过需要多个后代选择器组合到一起才能定位到目标元素上,而这定义过程,此元素的父元素与其他选择器都有许多相同的部分,嵌套就是把这些相同的部分放到某一层花括号里,然后通过花括号的层层缩进堆砌,找到它们的共性与特性. @charset "utf-8";//必须设置了这个才能编译有中文的注释 nav { ul { margin: 0; padding: 0; list-styl

sass学习笔记-输出方法

1.嵌套输出方式 nestedSass 提供了一种嵌套显示 CSS 文件的方式.例如 nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } 在编译的时候带上参数“ --style nested”: sass --watch test.scss:test.

Sass学习之 Sass语法入门--3.混合宏

3.混合宏 混合宏的作用: 相当于把复杂的变量声明集中在一起,免去了单个变量的调用. 声明:@mixin border{} 调用:@include border; 混合宏的分类: 不带参数: @mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px; } 带参数: //默认有值@mixin border-radius($radius:5px){ -webkit-border-radius: $radius; bord

Sass学习笔记

阅读目录 一. Sass安装 1.1 Ruby安装 1.2 运行gem命令 1.3 安装Sass 二. Sass基本用法 2.1 导入 2.2 注释 2.3 变量 2.4 嵌套 2.5 继承 2.6 占位符 2.7 混合宏 三. Sass编程 3.1 数学计算 3.2 条件 3.3 循环 3.4 函数 Sass被称为"CSS预处理器",就是用一种编程的思想去写CSS样式表.在还没接触Sass的时候,很多人都不愿意去了解,认为都会了CSS,为什么还要去写Sass,Sass最终生成的还是C

Sass学习笔记 -- 变量及变量作用域历史遗留问题

sass有两种后缀名文件: 一种后缀名为sass,写选择器时不能使用大括号和分号 一种后缀名为scss,使用大括号和分号 //后缀名为sass的语法,不能出现大括号和分号 $highlight-color: #abcdef .selected   border: 1px $highlight-color solid    //后缀名为scss的语法,跟css一样,需要大括号和分号 $highlight-color: #abcdef; .selected{   border:1px solid $

Sass学习笔记 -- 初步了解函数、运算、条件判断及循环

函数 sass定义了很多函数可供使用,当然你也可以自己定义函数,以@fuction开始.sass的官方函数链接为:sass fuction,实际项目中我们使用最多的应该是颜色函数,而颜色函数中又以lighten减淡和darken加深为最,其调用方法为lighten($color,$amount)和darken($color,$amount),它们的第一个参数都是颜色值,第二个参数都是百分比. //scss $baseFontSize:      10px !default; $gray:    

Sass学习笔记之入门篇

Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样式表.以下是我的学习笔记. Sass安装环境 1.安装sass(mac) ①:Ruby安装 ②:安装sass sudo gem install sass 可以通过 sass -v检测是否完成安装   2.更新sass gem update sass 3.卸载(删除)sass gem uninstal

less与SASS学习心得

在以往学习CSS和HTML的过程中其实还是比较简单的.因为HTML和css基本上没有逻辑推理,做一步显一步,所以做出来思路非常清晰.但是局限性也非常的大,那就是CSS本身是不具备变量计算判断循环这些功能的.而在实际编码过程中我们又需要简化工程量而不可避免的使用到这些功能.所以less和SASS便孕育而生.less和SASS是对现有的CSS的扩展.这两种都使css拥有了上述中没有的功能.CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide W