【sass基础2】的更多相关文章

[转]前端利器：SASS基础与Compass入门

[转]前端利器:SASS基础与Compass入门 SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让css看起来更像是一门语言,这种特性也被称为"css预编译".它的主要设计思想是让我们可以按照编程的思路编写自己的样式,然后通过"编译器"生成我们所需要的css文件. 当然,SASS只是css预编译工具中的一种,类似的工具还有Less.stylus等,SASS起初语法采…

Sass基础——Rem与Px的转换

rem是CSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位.不同的是em是相对于元素的父元素的font-size进行计算:rem是相对于根元素html的font-size进行计算.这样一来rem就绕开了复杂的层级关系,实现了类似于em单位的功能. Rem的使用 前面说了em是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小,在我们多次使用时,就会带来无法预知的错误风险.而rem是相对于根元素<html>,这样就意味着,我们只需…

sass基础编写流程

这是之前整理在word上的基础流程 sass是Ruby语言开发的一个用于动态编程css文件的框架 所以sass的运行依赖Ruby环境 所以要先安装Ruby 参见详细教程(安装参照慕课网有详细的教程) 安装好后就按照下面的顺序一步一步进行 在d盘或者其他的盘新建一个名为sass(文件名随意取)的文件夹 这里在d盘下的js1下创建了一个名为sass的文件夹 文件夹创建好后就在这个文件夹里创建一个页面(index.html就是你接下来要内容的页面)和一个接下来要写sass的页面(sass.scss)…

前端利器：SASS基础与Compass入门

SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让css看起来更像是一门语言,这种特性也被称为“css预编译”.它的主要设计思想是让我们可以按照编程的思路编写自己的样式,然后通过“编译器”生成我们所需要的css文件. 当然,SASS只是css预编译工具中的一种,类似的工具还有Less.stylus等,SASS起初语法采用缩进排列形式,但对于设计师来说既不直观还容易出现错误.在吸取了Less的一些特…

Sass基础语法

Sass是CSS3语言的扩展,在CSS的基础之上添加了新特性和语法,能省事地写出更好的样式表.Sass引擎是基于Ruby的. 导入Sass文件: @import "colors" //colors.scss 注释: //这种注释不会出现在生成的css文件中 /*这种注释内容会出现在css文件中,当当出现在原生CSS不允许的未知,则这些注释会被抹掉*/ 变量>> -->变量声明 //注意:变量中下划线和中划线表示同一个变量$flower-color:#abcdef; /…

sass基础—具体编译步骤及对应命令：详细

/*基础语法*/h1{ color: red;} /*变量定义*/ $color: red; /*嵌套*/body{ header{ } footer{ }} /*mixin函数*/@mixin alert($color: blue){ color: $color;} /*继承*/.blcok{ width: 100px; height: 100px; color: #f00;}p{ .block;} /*1)创建工程:1.使用sass创建:2.使用compass创建[compass creat…

Sass 基础教程

0. Sass 文件后缀名 sass 有两种后缀名文件:一种后缀名为 sass,不使用大括号和分号:另一种就是我们这里使用的 scss 文件,这种和我们平时写的 css 文件格式差不多,使用大括号和分号.本教程中所说的所有 sass 文件都指后缀名为 scss 的文件.在此也建议使用后缀名为 scss 的文件,以避免 sass 后缀名的严格格式要求报错. 1. 使用变量; sass让人们受益的一个重要特性就是它为css引入了变量.你可以把反复使用的css属性值 定义成变量,然后通过变量名来引用它…

Sass 基础(七)

Sass Maps 的函数-map-remove($map,$key),keywords($args) map-remove($map,$key) map-remove($map,$key)函数是用来删除当前$map中的某一个$key,从而得到一个新的 map,其返回的值是一个map.他并不能直接从一个map 中删除另一个map,仅能通过删除 map中的某个key 得到新的map $map:map-remove($social - colors,dribble); 返回的是一个新map $map…

sass基础用法

嵌套: 1.选择器嵌套: 2.属性嵌套; .box {     border-top: 1px solid red;     border-bottom: 1px solid green; } .box {  border: {   top: 1px solid red; bottom: 1px solid green;  } } 3.伪类嵌套: .box:before {  content: "伪元素嵌套"; }  .box{  &:before {     content:…

sass笔记-3|Sass基础语法之样式复用和保持简洁

上一篇详述了Sass如何嵌套.导入和注释这3个基本方式来保持条理性和可读性,这一篇更进一步地阐述sass保持样式复用和简洁的方式--混合器和选择器继承--这两种方式都能复用样式,使用它们也不难,但一定要注意什么时候该用什么. 零. 混合器--样式层上复用 当你需要一直复用大段样式的时候,可以考虑下混合器. 1. 基本用法 混合器使用@mixin标识符定义,然后通过@include引入,简单的说就是用@mixin定义一个混合器,它具有一个名字和一堆包含在花括号中的规则,用@include引入这个混…

sass笔记-2|Sass基础语法之让样式表更具条理性和可读性

这一篇主要详述保持sass条理性和可读性的3个最基本方法--嵌套.导入和注释. 零. 变量 变量本身的作用是为了保持属性值的可维护性,把所有需要维护的属性值放在同一个地方,快速更改,处处生效,可谓售后无忧. 1.变量声明 变量用"$"符号开头进行声明,任何可以用作CSS属性值的东西都可以用作sass变量的值,单个值.空格分开的多个值.逗号分开的多个值都可以: $primary-color: #233; $general-border: 1px solid #ddd; 变量一般声明在sa…

sass基础学习

2015.6.281.安装ruby2.运行gem安装sass-->gem install sass3.编译命令行sass --watch 文件路径/test.scss:编译后文件路径/test.css --style 四编译方式四种编译方式(1)嵌套输出方式 nested(2)嵌套输出方式 expanded(3)紧凑输出方式 compact(4)压缩输出方式 compressed 4.代码编写 1.全局变量与局部变量 2.嵌套选择器和嵌套属性 $color:red; nav{ a{ color:…

Sass 基础和入门

css本身很有趣,但是随着样式表变大,会越来越复杂,更加难以管理.css预处理器在这里就能帮上忙了.SASS 让你使用在css中不存在的特性,譬如变量.嵌套.mixins(混入),继承和一些其他好的特性,这些新特性会让你写css会更有趣. 了解变量 想想如果使用一个变量存储信息然后在样式表中反复重用该变量,可以存储颜色.字体大小和任何其他你能想到的CSS值.SASS使用$来声明变量. 当SASS编译处理后, 它会使用我们定义的 $font-stack 和 $primary-color 两个值然后…

sass 基础——回顾

1.webstorm 自动编译SASS 下载安装包 http://rubyinstaller.org/downloads/ 然后点击安装,路径为默认路径就行, 勾选以下两项 add Ruby executables to your PATH Associate .rb and rbw files with this Ruby information 安装完,打开命令行 输入 gem install sass webstorm 配置 点击setting选择tool下的file watcher 如下…

less/sass 基础base文件

less less-base.less文件展示: //清除标签默认样式; .label(){ ;;;_background-image:url(n1othing.txt)} ;;; font-size: 100%; vertical-align: baseline; } ol, ul, li { list-style: none; } body {line-height: 1.5; background: white; font-family: 'Microsoft Yahei', Arial,…

sass基础—属性嵌套以及跳出嵌套 @at-root

/*注意:定义的变量若是没有使用则不会编译到css文件中.*//*1)sass的局部变量*/$font:14px;//定义$font:12px !default; //没有default时是重新赋值,有了它则先取12再重新赋值为14$maps:(color:black,border-color: blue);//maps定义多值变量$className:main;//定义类名(此处修改了类名则使用该类名的地方也会相应改变)body{ /*局部变量*/ $color:red; /*2)全局变量*/…

sass基础学习（一）

移动端布局各种问题 pc端布局各种问题sass 组件模块化面向对象编程ajax 框架学习 webpack 打包 性能优化 gulp是基于Nodejs的自动任务运行器她能自动化地完成 javascript.coffee.sass.less.html/image.css 等文件的测试.检查.合并 .压缩.格式化.浏览器自动刷新.部署文件生成,并监听文件在改动后重复指定的这些步骤. Sass 和 CSS 写法有差别:没有括号,依靠严格的缩进方式来控制Sass 和 CSS 写法的确存在一定的差异,由于…

sass基础常用指南

一.变量 $global-color:red; .nav{ background:$global-color; } 二.sass命名时横杠和下划线不区分 $global-color:yellow; .nav{ background-color:$global_color } .footer{ background-color:$global-color } 三.变量中可以套用变量 $global-color:red; $global-border:1px solid $global-color;…

sass基础篇

scss的语法非常简单: $color: red; div{ color: $color; } 这就是一个简单的scss代码. 但是,使用 Sass 进行开发,那么是不是直接通过“<link>”引用“.scss”或“.sass”文件呢?显然是不行的,因为浏览器只能解析css文件,所以在使用的时候需要对scss文件进行编译.当然编译方法有很多,可以使用sass命令,也可以使用webpack,fis3等一些代码打包工具. Tips:相对于scss,sass语法比较严格而且语法不太容易被前端开发者所…

Sass 基础(八)

@import Sass 支持所有css 的@规则,以及一些Sass 专属的规则,也被称为“指令(directive)”.这些规则在Sass 中具有不同的 功效,详细解释如下. @import Sass 扩展了CSS 的@import 规则,让它能够引入 SCSS 和 Sass 文件. 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一 的 CSS 文件. 另外,被导入的文件中所定义的变量或 mixins 都可以在主文件中使用. @import 根据文件名引入. 默认情况下,它会寻…

Sass 基础(六)

join() 函数 join()函数是将两个列表连接合并成一个列表. >>join(10px 20px, 30px 40px) (10px 20px 20px 40px) >>join((blue,red),(#abc,#def)) (#0000ff,#ff0000,#aabbcc,#ddeeff) 不过join()只能将两个列表连接成一个列表,如果直接连接两个以上的列表将会报错 将多个join()函数合并在一起使用 >>join((blue red),join((#a…

Sass 基础(五)

@if @if 指令是一个SassScript,它可以根据条件处理样式块,如果条件为true返回一个样式块,反之 false 返回另一个样式块,在Sass 中除了@if之,还可以配合@else if和eles 一起. 例如: //SCSS @mixin blockOrHidden($boolean:true){ @if $boolean { @debug "$boolean is #{$boolean}"; display:block; } @else{ @debug "$b…

Sass 基础(四)

当你想设置属性值的时候你可以使用字符串插入进来,另一个使用的用法是构建一个选择器. @mixin generate-sizes($class,$small,$medium,$big){ .#{$class}-small {font-size:$small;} .#{$class}-medium{ font-size:$medium} .#{$class}-big{ font-size:$big;} } @include gencerate-sizes("header-text",12p…

Sass 基础(三)

扩展/继承 继承对于了解css 的同学来说一点都不陌生,先来看一张图 在Sass 中也具有继承一说,也就是继承类中的样式代码块,在Sass中时通过关键词“@extend”来 继承已经存在的类样式块,从而实现代码的继承. //SCSS .btn{ border:1px solid #ccc; padding:6px 10px; font-size:14px; } .btn-primarg{ background-color:#f36; color:#fff; @extend .btn; } .bt…

Sass 基础(一)

css 是一些非常简单得语句的组合,既然简单的语句,就不可避免的有很多重复的,冗余的东西,而且没有传统编程语言变量,控制语句等高级特性,所以造成了css 编写低效,往往需要查找替换,大量复制来修改或者编写.Sass 是用弥补这些缺陷的,使开发更加的方便快捷,更加方便管理. 1.Sass和SCSS的区别. 文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名 语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;)…

sass基础

参考:https://www.sass.hk/guide/…

Sass基础（二）

五.嵌套 在Sass中,嵌套有三种方式:选择器嵌套.属性嵌套.伪类嵌套 1.选择器嵌套 2.属性嵌套 3.伪类嵌套 六.混合宏 当样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无法达到目的了.这时候 Sass 中的混合宏就会变得非常有意义. 七.扩展/继承/占位符 在Sass中,同关键词“@extend”来继承已存在样式块 八.插值 插值可以让变量和属性工作很完美,但使用时具有局限性. 语法格式:#{ XXX } 九.Sass的数据类型 Sass的数据类型大致有六种:数字.字符串(有引…

Sass基础（一）

一.Sass语法规范 1.Sass老版本:通过tab键严格控制缩进:不带有任何分号和大括号:以“.sass”为扩展名. 2.Sass新语法格式(Scss):外形和css无差,以“.scss”为扩展名. 二.Sass编译 1.命令编译 在命令终端输入sass指令,是最直接最简单的编译方式. 单文件编译指令: sass <要编译的sass文件路径>/style.scss : <要输出的css文件路径>/style.css 多文件编译: sass sass/:css/ (将项目中sass…

【01】sass基础信息：

[01]基础信息:   2016年4月16日   最新版本:3.4.22   官网:http://sass-lang.com/(下图)       CSStoSCSS 网站:http://css2sass.herokuapp.com/     基础指南:http://sass-lang.com/guide(下图)           官方使用文档地址:http://sass-lang.com/documentation/file.SASS_REFERENCE.html#using_sass(下图…

sass基础教程

1. 使用变量; $highlight-color: #F90; .selected { border: 1px solid $highlight-color; } //编译后 .selected { border: 1px solid #F90; } 2. 嵌套CSS 规则; #content { article { h1 { color: #333 } p { margin-bottom: 1.4em } } aside { background-color: #EEE } } /* 编译后…