文档章节

compass&sass高级应用

Billydotzhang
 Billydotzhang
发布于 2016/10/27 11:56
字数 2040
阅读 16
收藏 0

一./*背景知识*/

1.Sass是什么?

  Sass可以简化你的Css工作流,并可以使你的Css的扩展和维护工作变的更加容易!例如,曾几时何,因为客户的需求的变更,你必须不断的通过查找和替换来更改一个像素值,或者,为了能够确定多栏布局中某一栏的宽度,你需要使用计算像素值软件才能搞定。
  Sass引入了一些新的概念如,变量,混合,嵌套和选择器继承.Sass 生成良好格式化的 CSS 代码,易于组织和维护。
  SASS是对CSS3(层叠样式表)的语法的一种扩充,它可以使用巢状、混入、选择子继承等功能,可以更有效有弹性的写出Stylesheet。
  Sass最后还是会编译出合法的CSS让浏览可以使用,也就是说它本身的语法并不太容易让浏览器识别(虽然它和CSS的语法非常的像,几乎一样),因为它不是标准的CSS格式,在它的语法内部可以使用动态变量等,所以它更像一种极简单的动态语言

2.Compass是什么?

   Compass由SASS的核心团队成员Chris Eppstein创建,是一个非常丰富的样式框架,包括大量定义好的mixin,函数,以及对SASS的扩展。

 二./*Sass和Compass安装*/

// SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。

// 假定你已经安装好了Ruby,接着在命令行输入下面的命令:

1.gem安装Sass
  C:\Users\DELL>gem install sass

2.查看Sass版本
  C:\Users\DELL>sass -v
  Sass 3.4.13 (Selective Steve)

3.编译Sass文件
  sass main.scss main css
  // 一般很少使用sass命令,一般都是用Compass命令;

4.gem安装Compass
  C:\Users\DELL>gem install compass

5.查看Compass版本
  C:\Users\DELL>compass -v
  Compass 1.0.3 (Polaris)
6.Compass搭建项目
  C:\Users\DELL\compass create sass
  // 结果:↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 5   directory sass/
  directory sass/sass/                  // sass文件所在目录;
  directory sass/stylesheets/           // css文件所在目录;
     create sass/config.rb              // 项目配置文件;
     create sass/sass/screen.scss       // 主要针对屏幕的sass文件;
     create sass/sass/print.scss        // 主要针对打印设备;
     create sass/sass/ie.scss           // 主要针对IE浏览器;
      write sass/stylesheets/ie.css
      write sass/stylesheets/print.css
      write sass/stylesheets/screen.css // scss文件编译后对应的css文件;最终将引入到HTML中的文件;

  // You may now add and edit sass stylesheets in the sass subdirectory of your project.
  // 你现在可以在sass文件的子文件中(screen.scss/print.scss/ie.scss)添加和编辑项目的样式表;

  // Sass files beginning with an underscore are called partials and won't be compiled to CSS, but they can be imported into other sass stylesheets.
  // Sass文件以"_"开头的叫做局部文件,不会被编译成CSS;但它们可以被引入到其他Sass文件中;

  // You can configure your project by editing the config.rb configuration file.
  // 你可以通过编辑config.rb配置文件来配置项目信息; 

  // You must compile your sass stylesheets into CSS when they change.
  // 当Sass文件被修改后,必须要编译Sass文件到CSS;

  // 1. To compile on demand:                   // 直接编译;                      
  // compass compile [path/to/project]
  // 2. To monitor your project for changes and automatically recompile:  
  // compass watch [path/to/project]            // 监听项目变化并且自动编译; 

  // To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
  // <head>
  //   <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
  //   <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
  //   <!--[if IE]>
  //       <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
  //   <![endif]-->
  // </head>
  // 将编译后的文件引入到HTML页面中;

三./*Sass语法基础*/

1.scss和sass文件转换
  sass-convert main.scss main.sass
  // 将scss文件转换为sass文件;

2.开启监听编译
C:\Users\DELL>cd sass
// 进入项目文件夹;
C:\Users\DELL\sass>compass watch
>>> Compass is watching for changes. Press Ctrl-C to Stop.
// 开启监听并自动编译;

3.变量
  // Sass通过"$"声明变量;
  >1.声明变量
    $headline-ff:"宋体",Arial,sans-serif;
    $main-sec-ff:Arial,sans-serif;
  >2.引用变量
    .headline {
      font-family: $headline-ff;
    }
    .main-sec {
      font-family: $main-sec-ff;
    }

4.@import引入文件
  >1.新建局部文件
    _variables.scss
    // 以"_"开头的局部文件,不会被编译到css;作为引入文件使用;
  >2.@import引入文件
    @improt "variables";
    // 基于Sass的既定规则:
    // 1.没有文件后缀名的时候,sass会添加.scss或.sass的后缀;
    // 2.用同一目录下,局部文件和非局部文件不能重名;
  >3.使用css原生@import的既定规则:
    >>1.当@import后边跟的文件名是以".css"结尾的时候;
    >>2.当@import后边跟的是"http://"开头的字符串的时候;
    >>3.当@import后边跟的是一个url()函数的时候
    >>4.当@import后边带有media queries的时候;

5.注释
  >1.以"/**/"注释的内容最后被输出到了对应的css文件中;
  >2.以"//"注释的内容则没有输出到对应的css文件;

6.类嵌套语法
  .main-sec{
    font-family: $main-sec-ff;
    .headline {
      font-family: $main-sec-ff;
    }
  }

7.属性嵌套语法
  .headline {
    font:{
      family:$main-sec-ff;
      size:16px;
    }
  }

8.父类选择器(自身调用)
  a {
    &:hover {
      color:red;
    }
  }

四./*Sass进阶语法*/

1.变量操作
  >1.直接操作变量,即变量表达式;
  >2.通过函数;
    >>1.跟代码块无关的函数,多是自己内置函数,称为functions;
    >>2.可重用的代码块:称为mixin;
      >>>1.@include;                // 以复制/拷贝的方式存在;
      >>>2.@extend;                 // 以组合声明的方式存在;

2.颜色值转换;
  Sass:
    color:hsl(270,100%,50%);
  Css:
    color:#7f00ff;

3.@mixin引用
  Sass:
    @mixin col-6 {                   // 声明col-6()函数;
      width:50%;
      float:left;
    }
    .webdemo-sec {
      @include col-6                 // 通过@include引入@col-6()函数;并且可以引入多个;
      &:hover {                      // &:表示父类选择器;
        background-color:#f5f5f5;
      }
    }
  Css:
    .webdemo-sec {                   // 继承了col-6()函数的属性值;
      width:50%;
      float:left;
    }
    .webdemo-sec:hover {             // 通过"&"调用到本身;
      background-color:#f5f5f5;
    }

4.@mixin包含参数引用;
  Sass:
    @mixin col($width:50%){           // 设置默认参数值;不传参数时,属性值为默认;
      width:$width;
      float:right;
    }
    .webdemo-abc {
      @include col(60%);              // 设置传参数;
    }
  Css:
    .webdemo-abc {
      width:60%;                      // 编译后的属性值;
      float:right;
    }

5.@extend继承
  >1.extend不可以继承选择器序列;
  >2.使用%,用来构建只用来继承的选择器;
  Sass:
    .error {
      color:#f00;
    }
    %error {                          // 构建只用来要继承的选择器;
      background:#0f0;
    }
    .serious-error {
      @extend .error;
      @extend %error;
      border:1px solid #f00;
    }
  Css:
    .error, .serious-error {          // 继承自.error;
      color:#f00;
    }
    .serious-error {                  // 继承自%serious-error;
      background:#0f0;
    }
    .serious-error {                  // 自己的属性;
      border:1px solid #f00;
    }

五./*Sass高级语法*/

1.@media用法
// Sass中的@media与Css中的@media区别:
// 1.Sass中的media query可以内嵌在css规则中;
// 2.在生成css的时候,media query才会被提到样式的最高级;
// 3.好处:避免了重复书写选择器或者打乱样式表的流程;
  Sass:
    @mixin col-sm ($width:50%){
      @media (min-width:768px){
        width:$width;
        float:left;
      }
    }
    .webdemo-sec {
      @include col-sm();
    }
  Css:
    @media (min-width:768px){
      .webdemo-sec {
        width:50%;
        float:left;
      }
    }

2.@at-root指令
// 嵌套副作用:增加了样式修饰的权重;制造了样式位置的依赖;
  Sass:
    .main-sec {
      font-size:12px;
      @at-root {                        // 在嵌套的时候使用@at-root指令;
        .main-sec-headline {            // 指定被嵌套的内容输出到样式表的顶层;
          font-size:16px;
        }
        .main-sec-detail {
          font-size:14px;
        }
      }
    }
  Css:
    .main-sec {
      font-size:12px;
    }
    .main-sec-headline {         // 编译后成功输出到样式表的顶层; 
      font-size:16px;
    }
    .main-sec-detail {
      font-size:14px;
    }

3.if操作符
  @mixin col-sa ($width:50%){
      // 使用type-of()方法:检测$width是否是数值类型;
      @if type-of($width) != number {
          // #{}:可以引用Sass的变量;--Ruby语法;
          // @error:表示错误信息;
          @error "$width必须是一个数值类型,你输入的width是:#{$width}.";
      }

      // 使用unitless()方法:判断当前的数值是否跟有单位;
      // 前置not表示否定,双重否定表示肯定;
      @if not unitless($width){             // 判断数值有单位;
          @if unit($width) != "%" {         // 如果单位不是%;
              @error "$width必须是一个数值类型,你输入的width是:#{$width}.";
          }
      } @else {                             // 判断数值没有单位;
          @warn "$width必须是一个数值类型,你输入的width是:#{$width}.";
          $width:(percentage($width)/100);  // 换算成带%单位的数值;
      }
      @media (min-width:768px){
          width:$width;
          float:left;
      }
  }

4.Sass的输出格式
// 在config.rb配置文件里;
  >1.output_style = :expanded or :nested or :compact or :compressed
    >>0.:expanded   => 编译后的文件是展开的;
    >>1.:nested     => 根据嵌套,在输出的时候代码缩进;
    >>2.:compact    => 将所有的属性汇总到一行;选择器之间的关系更清晰;
    >>3.:compressed => 将所有的代码压缩以占用最小的空间;

 

© 著作权归作者所有

上一篇: mac卸载node
下一篇: 判断手机号
Billydotzhang
粉丝 8
博文 45
码字总数 20916
作品 0
崇明
私信 提问
[求助]关于Oracle的高级复制

大家好, 我现在遇到点问题,是关于Oracle的高级复制的,烦请大家帮忙,谢谢! 问题是这样的: 现在,两台机器A和B上装有相同的应用App1,在某一时刻,只有一台机器上的应用在工作,如果这台机...

岁月无声798
2012/11/03
90
1
分享35本关于PHP的学习书籍(免费下载)

分享35本关于PHP的学习书籍(免费下载) 1、PHP面向对象编程 2、PHP与MVC开发模式 3、PHP_面向对象教程(强力推荐) 4、Smarty php模板引擎 5、php_mysql_web_dbs 6、PHP_和_MySQL_WEB_开发_部...

邓剑彬
2012/12/01
515
5
程序人生——为什么高级、初级程序员都重要呢?

每个找工作的程序员都必然会遇到这样的招聘贴:寻找“高级程序员”或“初级/入门级程序员”——也许你并没有真正理解这两者之间的区别。与此同时,许多招聘经理可能也不明白其中的区别,他们...

欧阳海阳
2018/07/18
0
0
JavaScript扩展工具包--Oraclejet

Oraclejet是一款Oracle的JavaScript扩展工具包。 关于 Oracle JET Oracle JET主要针对于工作在客户端应用的中级到高级JavaScript开发人员。这是一套Oracle贡献的JavaScript库的开源JavaScrip...

匿名
2016/03/17
475
0
[上海及苏州周边]上若科技高薪诚聘PHP开发人员 6K-15K

工作地点:上海周边-昆山-花桥(上海嘉定安亭11号线附近) 工作内容: 负责公司旗下平台应用研发与功能更新; 学历要求:大专及以上学历。 晋升空间:项目经理->研发经理->研发总监->技术总监 ...

Jankrong
2011/08/18
693
11

没有更多内容

加载失败,请刷新页面

加载更多

springboot2.0 maven打包分离lib,resources

springboot将工程打包成jar包后,会出现获取classpath下的文件出现测试环境正常而生产环境文件找不到的问题,这是因为 1、在调试过程中,文件是真实存在于磁盘的某个目录。此时通过获取文件路...

陈俊凯
今天
6
0
BootStrap

一、BootStrap 简洁、直观、强悍的前端开发框架,让web开发更加迅速、简单 中文镜像网站:http://www.bootcss.com 用于开发响应式布局、移动设备优先的WEB项目 1、使用boot 创建文件夹,在文...

wytao1995
今天
10
0
小知识:讲述Linux命令别名与资源文件的区别

别名 别名是命令的快捷方式。为那些需要经常执行,但需要很长时间输入的长命令创建快捷方式很有用。语法是: alias ppp='ping www.baidu.com' 它们并不总是用来缩短长命令。重要的是,你将它...

老孟的Linux私房菜
今天
8
0
《JAVA核心知识》学习笔记(6. Spring 原理)-5

它是一个全面的、企业应用开发一站式的解决方案,贯穿表现层、业务层、持久层。但是 Spring 仍然可以和其他的框架无缝整合。 6.1.1. Spring 特点 6.1.1.1. 轻量级 6.1.1.2. 控制反转 6.1.1....

Shingfi
今天
8
0
Excel导入数据库数据+Excel导入网页数据【实时追踪】

1.Excel导入数据库数据:数据选项卡------>导入数据 2.Excel导入网页数据【实时追踪】:

东方墨天
今天
11
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部