关于sass的基础语法介绍

注:主要作为记录用

前言:

   sass是css预编译工具中的一种,结合compass使用可以大大加快css开发的速度,同时也可以解决一些css开发里比较难受的点。使用sass可以使css的开发对编程人员更友好。

安装和使用:

   sass基于ruby,首先需要去ruby官网下载安装ruby。ruby下载地址.

   下载安装过程很简单,记得勾选添加到PATH。之后就可以在命令行里通过 ruby -v 来查看是否安装成功。

   然后就可以使用gem包管理工具了 因为容易被墙 需要换源:

    gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/

   可能会碰到SSL证书问题, 改为 http://gems.ruby-china.org/

   之后用gem install sass 安装sass

   同时可以用gem install compass 安装compass

   成功后就可以使用了,可以在一个目录下,使用 compass create projectName 来新建一个sass项目

   然后使用 compass watch可以监听并且实时reload项目 得到编译后输出的css文件。

   关于cpmpass的使用会在之后总结。先来讲讲Sass。

Sass语法:

  注: sass因为历史原因存在scss以及sass两种文件后缀名,采用了不同的语法。sass使用缩进来进行嵌套,语法简洁开发高效,但是非常用者难以阅读。scss语法类似css的嵌套,方便阅读,本文均采用scss。
本文的介绍按照常用程度来,只记录了一些常用核心功能,详细介绍请阅读官方文档

  变量:

    抽象出网页上需要复用的样式,定义成变量。

    变量像这样: $screen-ff: Arial;

    使用变量: .screen {font-family: $screen-ff;}

    会被自动编译为: .nav {height: Arial;}

    一般把变量定义放在一个单独的文件里,例如_variables.scss(文件名字前加下划线说明是个模块,模块与待编译文件不能重名)然后用@import "variables"方法导入。

    @import 与css原生的指令不同。

  嵌套:

.screen {
height: $screen-ff;

.head {
font-size: 14px;
}
}
输出为:

.screen {
height: Arial;
}
.screen .head {
font-size: 14px;
}
属性也可以嵌套:

.head {
font: {
family: $screen-ff;
size: 14px;
}
}
这样的嵌套可能会引发问题:

a {
:hover {
color: #66ccff;
}
}
输出为:

a :hover {
color: #66ccff;
}

这会让a标签里包含的子级标签获得此样式,这不是我们想要的结果,此时需要使用&来确认引入父级标签

改写为:

a {
&:hover {
color: #66ccff;
}
}
输出变为:

a:hover {
color: #66ccff;
}

mixin:
一般在遇到网页上有重复功能的div的时候,使用mixin来构建一个模板,进行复用。mixin也可作为局部文件引入

示例:

@mixin col ($width: 50%) {
width: $width;
float: left;
}

这个方法用于设置一个模块占屏比,在传参的时候可以设置默认参数。
使用:

.body {
@include col(25%);
}
输出:

.body {
width: 25%;
float: left;
}

extend:
大家都熟悉的继承,当想要构建一些新的元素,又存在了类似元素的时候,可以通过继承来简化代码结构,加快开发和运行。
比如存在这样一个样式:

.danger {
color: #f00;
}

我们想加一个更高程度的样式:

.danger-serious {
color: #f00;
border: 2px #f00;
}

这样就出现了代码冗余,通过extend改造:

.danger {
color: #f00;
}
.danger-serious {
@extend .danger;
border: 2px #f00;
}

输出为:

.danger, .danger-serious {
color: #f00;
}
.danger-serious {
border: 2px #f00;
}

如果不需要使用.danger样式,可以把.error改为%eroor,只用来继承,自身不输出(类比构造函数?)
可能要比较复杂的样式才能体现出extend的威力...
extend与类的继承不同,更像是接口的继承,用于引入父级样式类的所有属性。
此外,extend不能继承嵌套的选择器序列。

sass的基本语法就说这些。此外sass还有很多自带的函数,用于构建更加庞大的插件模块,作为开发者的我们自己去编写这些插件是很低效的,所以我们一般使用Compass框架来提高sass的使用效率。

时间: 2024-08-09 08:02:48

关于sass的基础语法介绍的相关文章

scala函数式编程(二) scala基础语法介绍

上次我们介绍了函数式编程的好处,并使用scala写了一个小小的例子帮助大家理解,从这里开始我将真正开始介绍scala编程的一些内容. 这里会先重点介绍scala的一些语法.当然,这里是假设你有一些java或者python的基础,毕竟大部分人不会将scala当作第一门学习编程的语言. 不过这些语法知识记不住也没关系,本身语法这种东西就应该在使用中被记住.这里写这篇的目的也只是梳理一遍,方便大家对语法有个初步的印象,后面可以随时查询. PS:所使用的版本是scala 2.11.8,那我们开始吧 一.

第一章 Scorpio-CSharp基础语法介绍 变量篇

1. 申请变量时加上 var 证明此变量的作用域为当前作用域,不加var的一律认为是全局变量 2. 预留全局变量 _G 全局table,_G保存了所有全局变量 _VERSION 脚本引擎版本号,暂时全部为master _SCRIPT 脚本引擎对象 3. 脚本内所有数据类型分别为 null bool number string function array table userdata,下面为各类型的申请 null 类型 var a = null bool 类型 var a = true var

第二章 Scorpio-CSharp基础语法介绍 语法篇

1. if 1 var a = 300 3 if (a == 100) { 5 print(100) 7 } else if (a == 200) { 9 print(200) 11 } elif (a == 300) { 13 print(300) 15 } elseif (a == 400) { 17 print(400) 19 } else { 21 print(0) 23 } else if(有空格) 和 elif 和 elseif(无空格)  三种写法都可以使用,都当作 else if

javaScript基础语法介绍

简介 JavaScript是一种脚本语言. (脚本,一条条的文字命令.执行时由系统的一个解释器,将其一条条的翻译成机器可识别的指令,然后执行.常见的脚本:批处理脚本.T-SQL脚本.VBScript等.) HTML只是描述网页长相的标记语言,没有计算.判断能力,如果所有计算.判断(比如判断文本框是否为空.判断两次密码是否输入一致)都放到服务器端执行的话网页的话页面会非常慢.用起来也很难用,对服务器的压力也很大,因此要求能在浏览器中执行一些简单的运算.判断.JavaScript就是一种在浏览器端执

python的基础语法介绍 1

一 缩进 python是通过缩进来确定语法格式的,最好使用4个空格俩缩进 案例: time = 12 if(time == 12): print '12' else: print '18' time = time + 6 print str(time) 执行这段代码,结果值为 12 修改上面的代码,使缩进不一样,结果也是不一样的,如下: time = 12 if(time == 12): print '12' else: print '18' time = time + 6 print str(

C#基础语法介绍

常用语法: 1.显示数组内容 现在有个字符串型的数组 args,想要在log中输出结果,那么做法是用string.join() string[] args; string.Join(",", args);

Python基础语法介绍 - 面向对象(下)和异常处理

概述: 上一节主要介绍了面向对象的一些基本概念:类,类的组成元素"方法和属性",类的特性"继承,多态和封装".这一节课分为两部分:(一)类方法及调用,静态方法及调用,单例类(二)异常处理 第一部分:类方法.静态方法和单例类 类方法及调用 (1)使用@classmethod修饰的方法,第一个参数是cls(2)类方法操作类属性:实例方法操作实例对象属性(3)调用方式:类名.类方法():实例对象.类方法() #不推荐用此方法调用类方法 @classmethod def a

Scala基础语法介绍

1.变量的定义 注意:在scala中没有static的概念,在object这个关键字修饰的类中所有的方法和属性都是static的.这里的object类叫做伴生类,目前不涉及. 例: object Test01{ def main(args: Array[String]): Unit = { //使用val定义的变量是不可变的,相当于java中的final修饰的 val v1=1 //使用var定义的变量的值是可变的,在scala中鼓励使用的是val var v2=2 //在定义变量的时候,也可以

Python基础语法介绍:面向对象编程

面向对象编程 面向对象编程,简称OOP:是一种解决软件服用的设计和编程方法.这种方法把软件系统中相似的逻辑操作.数据.状态等以类的形式描述出来,通过对象实例在软件系统中复用,从而提高软件开发效率. 类和对象 类:一个事物的抽象,定义了一类事物的属性和行为.类具有继承,多态的特性.对象:通过类创建的一个具体事物,也就是类的实例,它具有状态和行为,可以做具体的事情.关系:类相当于创建对象的模板,根据类可以创建一个或者多个对象实例.类的构造方法 类的访问权限 继承 多态 原文地址:http://blo