【Sass】+【Compass】学习笔记

2017-03-30 20:16 SiestaKc 阅读(441) 评论(0) 编辑收藏举报

这两天一直在学习sass和compass，看完了一些教程后决定做一些实践操作，权当笔记记录一下。

COMPASS:compass-style.org

安装compass：gem install compass
查询版本：compass -v
在ruby环境中安装好compass后，创建compss工作区间:madir workspace
进入工作区间创建项目:compass create compass-learn-init

{

1、以_开头的文件为局部文件，主要用来被其他的样式文件引入，在编译的时候不会单独的被编译成CSS文件

2、在Sass改变的视乎，必须编译成css才能生效（在项目文件里面编译）
   2-1：按需编译compass compile
   2-2：自动编译 compass watch

}

Sass：变量语法

1、局部变量抽离到外部的局部文件里('_'variables),宿主文件中@import引入

//声明局部变量：$headline-ff:Braggadocio,Arial,Verdana,Helvetica,sans-serif;

//宿主文件中引用变量

.main{

font-family:$headline-ff;

}

Sass:嵌套语法

1、 parent_class 空格{

.child_class{

。。。

}

2、a {

&:hover{

color:blur

}

}//使用&父类引入，并样式输出到父类上，否则这个:hover样式将应用到a标签的所有内容上

3、属性嵌套

.headline{

font:{ //!注意，这里font(属性)后的冒号不可去掉

family:￥headline-ff;

size:16px;

}

Sass:变量操作

1、直接操作变量，即变量表达式
2、通过函数 
   {
   ·跟代码块无关的函数，多为内置函数functions
   ·可重用的代码块，成为mixin{
              @include方式调用（以复制拷贝方式存在的）
              @extend方式调用，（以组合声明存在的）
    }
}
3、类名一定要有语义化的意义而不光是为了视觉上的效果不全

可以利用mixin定义函数，并在调用时进行传参
@mixin col($width){
      width:$width;
      float:left;
}
.webdemo-sec{
    @include col(25%);
    &:hover{
      background-color:#f5f5f5;
   }
}
================编译结果
.webdemo sec{
    width:50%;
    float:left;
}
.webdemo-sec:hover{
    background-color:#f5f5f5;
}

1、extend继承多个选择器，但不可以继承选择器系列。.A .B{}
2、连续继承,使用%，构成仅用来继承的选择器

Sass:@media,响应式的布局设计

- ·sass@media可以内嵌在css规则中
- ·最后编译后会被提取到样式的最高级别
- 好处：避免重复书写选择器和打乱样式表

@mixin col-sm($width:50%){
     @media(min-width:768px){
          //当屏幕的尺寸大于768px时，col占宽50%,小于768px时，占宽100%
         width:$width;
         float:left
}
}

编译时，media会被提到样式表的最外层

@media (min-width: 768px) {
  /* line 10, ../sass/screen.scss */
  .webdemo-sex {
    width: 50%;
    float: left;
  }
}

@at-root:样式表嵌套会增加样式的权重，和样式位置的依赖

所以可以使用@at-root{}指定被嵌套的内容输出到嵌套样式表为外。

Sass:输出格式Config.rb

修改config.rb文件中的output-style:可以改变样式的输出格式

output-style = :expand (默认的输出样式)

output-style = :nested （嵌套输出样式）

output-style = :compact (将所有选择器汇总到一行)

output-style = :compressed(将所有的样式压缩)

Compass:

Reset和Layout模块需要单独引入：@import "compass/reset" ,"compass/layout"

其他五大模块@import compass即引入：

·CSS3：提供跨浏览器的CSS3能力
·Helpers：内涵一系列函数
·Typography：修饰文本样式
·Utilities辅助函数，多为mixin
Browser：配置compass默认支持哪些浏览器，支持到哪个版本，一旦修改即影响其他模块的输出

如何使用Normalize替换掉reset

Reset模块

使用compass中的normalize插件

安装normalize--gem install compass-normalize
引入插件：修改config.rb---require 'compass-normalize'
但是，大型的开发项目中我们并不需要初始化全部的样式，这时normalize的八大模块就派上了用场

Normalize

·base模块：统一html body字体文字大小边距

·html5：统一html5的元素

·links：统一a标签的样式

·typography:统一段落文本样式

·embeds:统一img、svg样式

·groups：统一

·forms：统一文字

·tables：统一表格的标签

Layout模块

使用率最低的模块

stretching

@include sticky-footer(54px, "#my-root", "#my-root-footer", "#my-footer")

sticky-footer

@import "compass/layout";

@include sticky-footer(30px);

$grid-background-column-color:rgba(255,0,0,.25);

#root{
    @include grid-background();
}

CSS3模块：主要用于跨浏览器提供CSS3的能力

the browser support 模块是CSS3模块中最重要的模块，称为必要不充分条件。

有了封装在css3的这个browser-supported的模块后，将不用再使用

box-shadow:1px 2px 3px 2px #cfcecf;
-webkit-box-shadow:1px 2px 3px 2px #cfcecf;
-moz-box-shadow:1px 2px 3px 2px #cfcecf;

而直接使用

@import "compass/css3";
@include box-shadow(1px 2px 3px 2px #cfcecf);
//而这时，我又不需要该样式支持所有的浏览器，这时，我们即需要用到browser-supported模块
//用它配置compass默认支持哪些浏览器，特定浏览器支持到哪个版本，一旦修改，即影响其他模块的输出
@import "compass/support"; //也可省略.....
$supported-browsers: chrome;
$browser-minimum-versions: ("ie":"8");

如果我们想要了解浏览器和特定浏览器的版本，可通过

@debug browsers();打印出支持的浏览器

也可以，进入ruby命令行中

1---compass interactive

2---browsers() //查看到所有支持的浏览器

3---browser-versions(chorme)//查看某特定浏览器的所有版本

还有CSS3的其他属性

animation：动画效果

background-size:

Border-Radius：

CSS3 Pie:

Images:......等等

Typography模块

·links：链接修饰模块

·lists：列表修饰模块

·text:文本修饰模块

·Vertical Rhythm:垂直韵律修饰模块

@import "compass/typography/links"

a{

  @include hover-link();

}//修改下划线的样式

a{

  @include link-colors($normal,$hover,$active,$visited,$focus)

}//修改链接不同状态下颜色，只有$normal!是必须的

@import "compass/typography/lists"
.list-horizontal{
    @include horizontal-list(0,right); //padding值为0，向右浮动
}//可修饰导航条，使其向左浮动，又拥有一定的高度

========编译完成=======

  .list-horizontal li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0;
    white-space: nowrap;
    float: left;
    padding-left: 4px;
    padding-right: 4px; }

    .list-horizontal li:first-child {
      padding-left: 0; }

    .list-horizontal li:last-child {
      padding-right: 0; }

长文本或过长的url默认是：单行显示不换行的。
而当它们长度超出了父容器的宽度，就破坏了布局。
我们使用word-wrap强制它们换行。
.text-force-wrap{
   @include force-wrap();
} //强行掰断过长文本

当不想文本在任何位置换行，
.text-nowrap{
  @include no-wrap();
}

//而在过长的文本又不换行时我们经常用。。。。省略后面的文本
.text-ellipsis{
    @include ellipsis();
}

而firefox的低版本根本不支持 text-overflow: ellipsis

这个时候则需要修改ellipsis.xml文件即可

在ruby命令行中输入----compass install compass/ellipsis
生成elliplise.xml
在screen.sass文件中---$use-mozilla-ellipsis-binding:true;//开启对fiefox的支持

Vertical Rhythm

Helper模块

helper模块中的image-url('图片.png');可以直接指定图片路径。默认是绝对路径，如果要改变成相对路径，需要改变config.rb文件中的relative_assets=true配置项如果需要直接使用http路径，则需改变config中的 http_path:"http://img.siesta.com/compass-demo"

font-file()跟image-url()有异曲同工之妙

compass-env()返回当前开发环境和生产环境
@debug compass-env();
编译：compass compile -e production --force //-e指定编译环境，force让compass覆盖重写的已有的环境

也可通过在config.rb中设定compass的编译环境
environment = :production

在属性名、选择器或者字符串时，如果需要引用sass的变量或函数，需要
#{{selector{}}};

utilities模块

color:

print:

tables:

General:

@import "compass/utilities/general"

@include legacy-pie-clearfix(); //清除浮动

tag-clound:

Sprites:合图功能！当UI被修改，只需要利用该功能即可修改其他相关的样式，不用修改其他的HTML代码！

_icons.scss

@import "compass/utilities/sprites";

@import "logo/*.png";  //magic import，是一个不写到硬盘上的sass文件

@include all-logo-sprites();

ruby命令行
----compass sprite "images/logo/*.png"   //将_logo.scss文件写入到sass文件夹中

生成的css文件//.logo前缀相同
.logo-analyazer{
}
.logo-shape{
}

而如果将图片的命名 analyzer_active 和 analyzer_hover，
即会生成active和hover的样式

合图会合并全部的图片
合图布局的改变：$logo-layout:diagon;

会员力量，点亮园子希望

刷新页面返回顶部

SiestaKc