scss

scss

SASS是CSS3的一个扩展,增加了规则嵌套、变量、混合、选择器继承等等。

在SCSS中使用变量

$blue: #3bbfce;

$margin: 16px;

.content-navigation {

  border-color: $blue;

  color:

darken($blue, 9%);

}

.border {

  padding: $margin / 2;

  margin: $margin / 2;

  border-color: $blue;

}

转换成CSS如下:

/* CSS */

.content-navigation {

  border-color: #3bbfce;

  color: #2b9eab;

}

.border {

  padding: 8px;

  margin: 8px;

  border-color: #3bbfce;

}

SCSS嵌套:

table.hl {

  margin: 2em 0;

  td.ln {

text-align: right;

  }

}

li {

  font: {

family: serif;

weight: bold;

size: 1.2em;

  }

}

转换成CSS如下:

/* CSS */

table.hl {

  margin: 2em 0;

}

table.hl td.ln {

  text-align: right;

}

li {

  font-family: serif;

  font-weight: bold;

  font-size: 1.2em;

}

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

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

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

  div {
    @include left;
  }

循环语句

SASS支持for循环:

  @for $i from 1 to 10 {
    .border-#{$i} {
      border: #{$i}px solid blue;
    }
  }

也支持while循环:

  $i: 6;

  @while $i > 0 {
    .item-#{$i} { width: 2em * $i; }
    $i: $i - 2;
  }

each命令,作用与for类似:

  @each $member in a, b, c, d {
    .#{$member} {
      background-image: url("/image/#{$member}.jpg");
    }
  }

循环语句

SASS支持for循环:

  @for $i from 1 to 10 {
    .border-#{$i} {
      border: #{$i}px solid blue;
    }
  }

也支持while循环:

  $i: 6;

  @while $i > 0 {
    .item-#{$i} { width: 2em * $i; }
    $i: $i - 2;
  }

each命令,作用与for类似:

  @each $member in a, b, c, d {
    .#{$member} {
      background-image: url("/image/#{$member}.jpg");
    }
  }
时间: 2024-11-05 12:14:32

scss的相关文章

Sass 和 SCSS 有什么区别?

Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点: 文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名 语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似. Sass 语法 $font-stack: Helvetica, sans-serif //定义变量 $primary-color: #33

sass/scss 和 less的区别

转自:孤舟蓑翁 的博客http://www.cnblogs.com/wangpenghui522/p/5467560.html 高级程度排名: SASS (变量+混入+继承+函数+条件判断+嵌套+for+if+工具库Compass) >  SCSS (变量+混入+继承+函数+条件判断) > LESS (嵌套+变量+混入) > CSS (纯静态) 一. Sass/Scss.Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,

boostraps+jekyll+sass/scss+less+grunt整合使用详细备忘

2014-08-25 http://www.w3cplus.com/preprocessor/nodejs-and-grunt-compile-sass-to-css.html 安装grunt sass支持,包含grunt watch boostraps的Gruntfile.js,package.json,直接考到新建的项目目录调整使用,运行npm install 安装依赖包,可以删减不必要的 A.整合方法 1.https://github.com/gruntjs/grunt-contrib-s

less以及SCSS基础语法

less 1.注释: //这种注释不能够编译到CSS 文件中 /*这种注释 能够编译到CSS 文件中*/ 2.less 的基础语法 (1).声明变量: @变量名 : 变量值 使用变量: @变量名 >>>变量使用的基本原则: 多次频繁出现的值,后期需要统一修改的值,牵扯到数值运算的值,推荐使用变量 >>>less 中的变量类型 ①数值类: 不带单位的 123, 带单位的 1px ②字符串类型: 不带引号的 red #FF0000 带引号的"hahhaha&quo

angular2中如何引入scss

如何在ng2的模块或者组件中引入sass文件? 很简单,两个步骤 1.安装style-loader css加载器 npm install --save-dev style-loader 2.在ts文件中引入 import 'style-loader!../../node_modules/ladda/css/ladda.scss'; 或在组件中还可以的这样引入 @Component({ providers: [RegisterService, MdIconModule], templateUrl:

vue2.0 cli 支持scss

npm  install  node-sass  --save-dev npm  install  sass-loader --save-dev 使用如下: <style lang="scss"> div{ width:100%; height:100%; color:#ffffff; span{ color:#333; } } </style>}

SCSS - HelloWorld

[LJ?Dragon]鱼对水说你看不到我的眼泪,因为我在水里.水说我能感觉到你的眼泪,因为你在我心里.[LJ?Dragon]You're more than a shadow, I've just to believe.[LJ?Dragon]A true friend is some one who reaches for your hand and touches your heart. 简介 官网: http://www.sass.hk/guide/ 参考: http://www.w3cpl

css预处理scss环境配置

css 预处理器 CSS 预处理器用一种专门的编程语言,进行 Web css编码,然后再编译成正常的 CSS 文件,以供项目使用:说简单点就是在某个环境下写css 可以写变量.表达式.嵌套等,在通过该环境将css预处理的语言编译成正常的css文件; sass与scss 学习网站:  http://sass.bootcss.com/ sass是采用Ruby语言编写的一款css预处理语言.Sass的缩进语法,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到Sass里面,因此sa

17--在rails中使用scss

在上节课我们rails中使用coffeescript虽然有问题,但是这个跟系统是windows估计有关,不过我们可以先用每个页面去写普通的script标签就行了.下面讲解css样式在网页开发中的作用,因为我们前面只是简单的html页面代码所以页面就很简陋,而为了提高用户体验美化页面就用到了css样式,下面我们讲解一般的css使用: 我们以sessions控制器的new也就是登陆页面为例: 我们插入css代码使得表单能够在屏幕居中显示,也就是把class为col-md-6的div大标签居中就行,跟

less和scss

一.变量 对于开发者,变量应该是我们最好的朋友.如果你要重复的使用一个信息(本例中就是color),将它设置为一个变量就可以.这样,就可以保证自己的一致性并可能减少滚动代码来查找颜色值.复制.粘贴等繁琐的工作了.你甚至可以加或者减一些你需要渲染的HEX值到这些颜色上面. 看下例子: @blue: #00c; @light_blue: @blue + #333;@dark_blue: @blue - #333; 二.混入(mixin) 偶尔,我们会创建一些会在样式表中重复使用的样式规则.可以用LE