sass有两种形式1、scss  2、sass

一:代码的基本用法

1、变量

  如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。

  $side : left;

  .rounded {
    border-#{$side}-radius: 5px;
  }

2、计算

sass允许在代码中进行计算

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

3、嵌套

  div h1 {
    color : red;
  }

  可以写成:

  div  {
    h1{

      color : red;

    }
  }

  属性也可以嵌套,如:

  p {
    border: {
      color: red;
    }(ps:border后面必须加上冒号)
  }

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

  a {
    &:hover { color: #ffb3ff; }
  }

4、注释

  SASS共有两种注释风格。

  标准的CSS注释 /* comment */ ,会保留到编译后的文件。

  单行注释 // comment,只保留在SASS源文件中,编译后被省略。

  在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。

  /*! 
    重要注释!(通常可以用于声明版权信息)
  */

二:代码的重用

1、继承

  class2要继承class1,就要使用@extend命令:

  .class1 {
    border: 1px solid #ddd;
  }

  .class2 {
    @extend .class1;
    font-size:120%;
  }

2、Mixin

  Mixin有点像C语言的宏(macro),是可以重用的代码块。

  使用@mixin命令,定义一个代码块。

  @mixin left {
    float: left;
    margin-left: 10px;
  }

  使用@include命令,调用这个mixin。

  div {
    @include left;
  }

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

  @mixin left($value: 10px) {
    float: left;
    margin-right: $value;
  }

  div {
    @include left(20px);
  }

(有事暂停一下,本文出处:http://www.ruanyifeng.com/blog/2012/06/sass.html)

css预处理器--sass学习($变量名)的更多相关文章

  1. css预处理器sass学习

    SASS 叫做css预处理器,他的基本思想是用一门专门的编程语言来进行页面样式的设计,然后在编译成正常的css文件. Sass的用法 安装 sass是用ruby语言写的,所以我们在安装sass之前要先 ...

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

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

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

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

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

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

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

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

  6. CSS预处理器(SASS和LESS)

    Sass框架应用Sass简介 Sass又名SCSS,是CSS预处理器之一,它能让你更好更轻松的工作.Sass官网是这样描述Sass的:**Sass是一门高于CSS的元语言,能用来清晰的.结构化地描述文 ...

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

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

  8. 前端CSS预处理器Sass

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

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

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

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

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

随机推荐

  1. 小程序 切换到tabBar页面不刷新问题

    小程序跳转的几种方式有wx.navigateTo,wx.redirectTo,wx.reLaunch,wx.switchTab等.下面我们重点研究切换到tabBar的两种方式. wx.switchTa ...

  2. JDK 1.8源码阅读 TreeMap

    一,前言 TreeMap:基于红黑树实现的,TreeMap是有序的. 二,TreeMap结构 2.1 红黑树结构 红黑树又称红-黑二叉树,它首先是一颗二叉树,它具体二叉树所有的特性.同时红黑树更是一颗 ...

  3. Linux下批量杀掉筛选进程

    在做项目的时候,由于情况要求,需要把服务器上符合某一条件的进程全部kill掉,但是又不能使用killAll直接杀掉某一进程名称包含的所有运行中的进程(即我们可能只需要杀掉某一类含有特定参数命令的进程) ...

  4. Kestrel:Net Core的跨平台服务器

    概述 Kestrel是一个基于libuv的跨平台ASP.NET Core web服务器,libuv是一个跨平台的异步I/O库.ASP.NET Core项目默认使用Kestrel作为web服务器. 用户 ...

  5. windows下cmd无法使用telnet命令解决方法 (原)

    telnet不是内部或者外部命令,也不是可运行程序-----解决办法: (win7为例) 控制面板 --- > 程序(小图标下直接到[程序和功能]) --- >程序和功能 --- > ...

  6. AIX更改用户组

    1:先 修改 user: smit chuser 把id 号给改了.成功! 2:在 修改group 的时候报警告: smit chgroup : can not update the /etc/pas ...

  7. Linux实现VLAN

    交换机的端口有两种配置模式:Access和Trunk. Access口:端口属于VLAN,VLAN ID 1~4096.直接与计算机网卡相连,流入该口的数据包都被打上VLAN的标签. Trunk口:允 ...

  8. 什么是DNS攻击?它是如何工作的?

    什么是DNS攻击?它是如何工作的? DNS攻击是一种利用域名系统中的弱点或漏洞的网络攻击.今天,互联网已成为我们生活中不可或缺的一部分.从社交到金融.购物再到旅游,我们生活的方方面面都是互联网.由于互 ...

  9. Docker 介绍及安装

    Docker介绍 Docker采用 C/S架构 Docker daemon 作为服务端接受来自客户的请求,并处理这些请求(创建.运行.分发容器). Docker基于go语言并遵从Apache2.0协议 ...

  10. 关于ashrpt中行源的CPU + Wait for CPU事件深入解读

    该等待事件并不包含在等待事件范围,而是出现在ash的具体行源中,如下: 标注语句的每次执行大约1小时,如下awr所示: 该sql语句的最后一层Insert如下: insert into ta_tf l ...