SASS学习笔记（1）

序

之前稍微看过SASS的文档，但是由于工作中没有涉及，渐渐的搁置了。最近公司新招来一个热情似火的前端，不管什么技术，不管自己能不能hold住，都提出来用一用再说。这样对我也好，跟着这个哥们混妥妥的长见识了。

安装

SASS的官网有简单的说明文档：http://sass-lang.com/install；不过安装中还是遇到了一点问题，主要是“命令行”方法。稍微查了一下发现是因为版本问题，参考链接http://stackoverflow.com/questions/28589251/error-installing-gem-install-sass-windows-7。这真是一个非常尴尬的年代，新的版本有时不如旧版本好用，那为什么呢=。。=

时间： 2024-10-31 18:31:42

SASS学习笔记（1）的相关文章

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学习笔记2

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

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又名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

sass学习笔记-安装

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

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有两种后缀名文件: 一种后缀名为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学习笔记1

less在处理CSS动画时,非常恶心,决定转向sass了.sass诞生得比less早,只是因为它是ruby写的,因此受众面够少.但我们不需要自己下编译器或使用命令行,我们可以koala这神器 首先几个注意点,sass可以用sass后缀名,也可以用scss后缀名.前者比较恶心,像python一样没有花括号,也不让写分号,散架子一样.因此推荐用scss,这个也是目前我遇到的大部分人的选择. 关于中文编译出错的问题,需要指定字符集. @charset "utf-8";//必须设置了这个才能编

菜鸟的 Sass 学习笔记

介绍 sass 是什么?? 在sass的官网,它是这么形容给自己的 Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass 是世界上最成熟稳定强大的css扩展语言. sass并不是一种编程语言,但是我们可以用于开发网页样式,你可以称它为css预处理器.用sass来写css,然后再编译成正常的css文件. css兼容:Sass与所有版本的CS