SASS

叫做css预处理器,他的基本思想是用一门专门的编程语言来进行页面样式的设计,然后在编译成正常的css文件。

Sass的用法

  • 安装

    sass是用ruby语言写的,所以我们在安装sass之前要先安装ruby(ruby安装自行百度),执行下面命令安装:

      gem install sass
  • 使用

    sass就是普通的文本文件,后缀名为.scss。然后让我们用sass的语法写好文件之后,需要编译成.css文件才能供html文件使用(即通过link标签引入html文件),那么我们就可以使用命令行或是git工具,输入:

      sass test.scss test.css #假设我们的sass文件名为test

下面是一个具体编译sass的例子:

首先我们在文件夹中建上图这样的两个文件:.html、.scss



然后在两个文件中分别写入代码:

	<!-- html -->
<!DOCTYPE html>
<html>
<head>
<title>css预处理器sass test</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div>一个关于css预处理器sass的小练习</div>
</body>
</html> /* scss */
$blue:red; div{
color:$blue;
}

然后我们在用git将scss代码编译成.css代码,将得到如下三个文件,其中一个就是我们需要的.css文件。





运行html将得到如下结果。

sass语法基础

  • 变量

    sass是有变量的概念的,所以的变量都以$开头。

      $blue:red;
    
      div{
    color:$blue;
    }

如果变量需要嵌入在字符串中,我们就必须把他们放在#{}中。

	   $side : right;
  .rounded {
    border-#{$side}-radius: 5px;
  }
  • 计算功能

    sass允许代码中使用算式:

      $var:40;
    body {
      margin: (14px/2);
      top: 50px + 100px;
      right: $var * 10%;
    }
  • 嵌套

    就是我们的div及标签盒子可以嵌套设置css

      div {
      p {
        color:red;
      }
    }

属性也可以嵌套:border-color

border后面必须加冒号

	div {
  p {
    border: {
      color: red;
    }
  }
}

在嵌套的代码块内,可以使用&来引用父元素,如:a:hover伪类,可写为:

	a {
  &:hover {
color: #ffb3ff;
}
}
  • 注释

    和css文件注释一样 /* comment */.

代码的重用

  • 继承

    Sass允许一个选择器继承另一个选择器,使用@extend命令来实现:

  • Mixin

    Mixin有点像C语言的宏,是可以重用的代码,使用@mixin命令来定义一个代码块,在使用@include命令来调用这个mixin,就可以实现一个代码块的重用。

    mixin的强大之处,在于他可以指定参数和缺省值。



    使用的时候可以根据需要加入参数

css预处理器sass学习的更多相关文章

  1. css预处理器--sass学习($变量名)

    sass有两种形式1.scss  2.sass 一:代码的基本用法 1.变量 如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中. $side : left; .rounded { border- ...

  2. CSS预处理器Sass、LESS 和 Stylus

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...

  3. CSS预处理器Sass(Scss)、Less、Stylus

    CSS 预处理编译器能让我成程序化其的方式编写CSS代码,可以引入CSS中没有的变量.条件.函数等特性,从而让代码更简单易维护,但一般按预处理器语法编写的代码无法直接在浏览器中运行,需用通过工具比如g ...

  4. CSS预处理器——Sass、LESS和Stylus实践

    CSS(Cascading Style Sheet)被译为级联样式表,做为一名前端从业人员来说,这个专业名词并不陌生,在行业中通常称之为“风格样式表(Style Sheet)”,它主要是用来进行网页风 ...

  5. CSS预处理器—Sass、LESS和Stylus

    http://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html 一.什么是CSS预处器 CSS预处理器定义了一种新的语言, ...

  6. css预处理器 sass和stylus对比以及常用功能

    在众多的css预处理器语言中,sass和stylus算是十分优秀的两个.本文主要针对两者的常用功能做个简单的对比分析.在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言. 本文涉及到的sa ...

  7. 前端CSS预处理器Sass

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  8. css预处理器sass使用教程(多图预警)

    css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...

  9. 关于前端CSS预处理器Sass的小知识!

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

随机推荐

  1. python的进程与线程

    一.进程与线程的相关概念 1.什么是进程 进程是一个程序在一个数据集上的一次动态执行过程. 进程一般由程序,数据集,进程控制块三部分组成. 2.什么是线程 线程也叫轻量级进程,它是一个基本的CPU执行 ...

  2. 10.Query an Array-官方文档摘录

    1.插入 db.inventory.insertMany([ { item: "journal", qty: 25, tags: ["blank", " ...

  3. (4.2)SQL Server 客户端连接的问题

    转自:http://blog.51cto.com/jimshu/1395199 经常遇到 SQL Server 客户端无法连接到SQL Server 实例(服务).现在将这类问题归纳如下: 一.SQL ...

  4. Java排序算法总结(转载)

    排序算法 平均时间复杂度 冒泡排序 O(n2) 选择排序 O(n2) 插入排序 O(n2) 希尔排序 O(n1.5) 快速排序 O(N*logN) 归并排序 O(N*logN) 堆排序 O(N*log ...

  5. JSP页面退出时清除会话Session

    我们用一个quit.jsp来处理用户退出系统的操作,quit.jsp负责注销session,及时释放资源. 注销session. 关闭浏览器窗口. 其代码如下所示: <%@ page conte ...

  6. mysql binlog日志的三种模式

    1.statement level模式 每一条会修改数据的sql都会记录到master的bin-log中.slave在复制的时候sql进程会解析成和原来master端执行过的相同的sql来再次执行.优 ...

  7. Java并发(7):阻塞队列

    在前面我们接触的队列都是非阻塞队列,比如PriorityQueue.LinkedList(LinkedList是双向链表,它实现了Dequeue接口). 使用非阻塞队列的时候有一个很大问题就是:它不会 ...

  8. java return redirect

    return “/user/new” 或 return “/user/edit” 如果new页面有下拉(举例)组件,在return之前如果没有准备select所需要的数据,则return到new的页面 ...

  9. nodejs fs学习

    在本章的开始,我本来只想写一些关于fs模块的内容,虽然这个模块包含的方法非常的多,但没有想到的是它和我们上一篇文章Node.js Buffer还存在着关联,所以我又把关于Buffer的内容简单的学习下 ...

  10. 什么是jstack

    以下是百度百科的内容 jstack是java虚拟机自带的一种堆栈跟踪工具. jstack用于生成java虚拟机当前时刻的线程快照.线程快照是当前java虚拟机内每一条线程正在执行的方法堆栈的集合,生成 ...