compass General 常用api学习[Sass和compass学习笔记]

compass 中一些常用api 包括一些浏览器hack

@import "compass/utilities/general"

Clearfix

Clearfix 是用来清除浮动 float 造成的内容问题,以前用clear 方法可以解决,通过查看Clearfix
的源码发现对与高版本的浏览器其实已经可以不用了

?





1

2

3

4

@mixin clearfix {

  overflow: hidden;

  @include has-layout;

}

用overflow 就可以了

而对于低版本的浏览器 例如ie6 还是需要clear的

compass 提供了api pie-clearfix  来解决这个问题

?





1

2

3

4

5

6

7

8

@mixin pie-clearfix {

  &:after {

    content: "";

    display: table;

    clear: both;

  }

  @include has-layout;

}

Float


float 提供 相关的hack 例如ie下双倍浮动间距问题

调用 api 即可

float($side)

Hacks


这里准备了一些常用的准对浏览器的bug的hack

has-layout($approach) 
参数为 zoom
或  block

bang-hack($property,
$value, $ie6-value)  这个是写给ie6css 属性的快捷方式

?





1

2

3

4

5

6

@mixin bang-hack($property, $value, $ie6-value) {

  @if
$legacy-support-for-ie6 {

    #{$property}: #{$value} !important;

    #{$property}: #{$ie6-value};

  }

}

Minimum


这里准备了最小宽度和最小高度

min-height($value)
min-width($value)

有很多人可能对span div 设置min-width 不起作用 设置 display: inline-block;
后即可

Reset

重置浏览器默认样式

@import "compass/utilities/general/reset"

Tag Cloud

这个坑爹的名字 根本就不知道干啥的

我试了试

?





1

2

3

4

5

6

7

8

<div class="mycloudtag">

    <span class="xxs">1</span>

    <span class="xs">2</span>

    <span class="s">3</span>

    <span class="l">4</span>

    <span class="xl">5</span>

    <span class="xxl">6</span>

</div>

?





1

2

3

.mycloudtag{

 @include   tag-cloud()

}

才知道是这个效果

compass General 常用api学习[Sass和compass学习笔记],布布扣,bubuko.com

时间： 2024-10-23 10:38:51

compass General 常用api学习[Sass和compass学习笔记]的相关文章

compass typography 排版 常用排版方法[Sass和compass学习笔记]

Bullets 用来定义ul li 相关的样式 no-bullet  关闭 li的默认样式 那个小圆点 no-bullets 作用域ul 调用no-bullet 函数 不过用了reset 后 默认没有小圆点了 pretty-bullets($bullet-icon, $width, $height, $line-height, $padding) @mixin pretty-bullets($bullet-icon, $width: image-width($bullet-icon), $hei

【CSS】Windows下安装sass和compass

因为sass和compass依赖于ruby环境,所以装之前先确认装了ruby.可到官网下载最新版ruby安装包http://rubyinstaller.org/downloads/ 在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境: Sass和compass安装: 安装完ruby后,在开始菜单找到刚才我们安装的ruby,打开Start Command Prompt with Ruby

compass reset和layout [Sass和compass学习笔记]

reset 可以重置浏览器的的html的默认样式,因为各个浏览器对有些元素解析差别很大 通过重置样式可以让样式的浏览器兼容 更简单 使用方法简单 @import "compass/reset" layout 有几个常见的布局函数,我觉得挺管用,其他的都是用来写组建非常常用的 Sticky Footer 该模块提供了需要布置你的页脚,它坚持到页面底部的工具. 这个模块主要用于布局页脚,可以让页脚固定在页面的最底部,是一个比较常用的功能,而且有配套的html代码 引用方法 @import

Sass与Compass 学习笔记

Sass与Compass 学习笔记 安装: 1.装sass之前先确认装了ruby ; 2.命令gem install sass *注一般不能正常安装 由于国内网络原因(你懂的),导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败.这时候我们可以通过gem sources命令来配置源,先移除默认的https://rubygems.org源,然后添加淘宝的源https://ruby.taobao.org/,然后查看下当前使用的源是哪个,如果是淘宝的,则表示可以输

Sass学习笔记 -- 在Windows系统中安装Sass和Compass

Sass和Compass都是基于Ruby编程语言的命令行工具.要使用它们,你首先需要在电脑中安装Ruby,Windows系统并没有预置Ruby,因此如果你之前没有安装过Ruby,现在就需要进行安装.安 装Ruby只需要花费几分钟的时间. 直接百度搜索"ruby"或者点击http://rubyinstaller.org/downloads/ 下载,根据自己系统配置,如果是x64,则选择" Ruby 2.3.1 (x64)" 按照提示,点击下一步,注意这里需要全部勾选

Sass学习之路：Sass、Compass安装与命令行

导言 CSS不是一门真正意义上的编程语言,很多编程语言理所当然的特性(比如变量),都不被支持.同时再开发模块化的web项目的时候,也要避免相互干扰.为了弥补CSS的这些不足,就产生了CSS预处理器,Sass则是其中的佼佼者. 什么是Sass Sass是最成熟.稳定.强大.专业的CSS扩展语言(官方解释).直白点,Sass就是一个非常好用的CSS预处理器,为css引入部分编程语言的特性. Sass在现阶段,有两种编码的语法,一个是兼容CSS语法的Scss格式文件,一个是Haml.Ruby类似语法的

揭开Sass和Compass的神秘面纱

可能之前你像我一样,对Sass和Compass毫无所知,好一点儿的可能知道它们是用来作为CSS预处理的.那么,今天请跟我一起学习下Sass和Compass的一些基础知识,包括它们是什么.如何安装.为什么要使用.基础语法等一些基本知识.需要说明的是我也仅仅只是刚刚接触Sass和Compass,一些高级用法等将不再本文的讨论范围之内.接触一周以后发现Sass和Compass的用处非常大,也打算今后在项目中尝试引进并应用起来.希望读完以后,你跟我一样对Sass和Compass给你带来的东西非常开心,也

(一)认识Sass和Compass

第一章 Sass和Compass让样式表重焕青春 // 内容概要// 开始学习Sass和动态样式表// 用Sass更高效地写样式表// Compass简介// 用Compass迎接工程实践中的样式挑战 1.2.1 通过变量来复用属性值 1 声明变量:$blue:#1875e7; 2 调用变量:.blue { color:$blue; } 1.2.2 通过嵌套来快速写出多层级的选择器 1 ul{ 2 float:right; 3 li { 4 float:left; 5 a{ color:#111

Sass和Compass安装

心血来潮,想用下Sass. 先安装,先装ruby,官网下载即可,双击安装,需要注意的是在安装过程中,选择将ruby加入环境变量,这样我们就可以在命令行下用了. 然后就是安装Sass,一条命令即可 gem install sass 但是,竟然被墙了..使用下面的方法,原文地址:http://www.w3cplus.com/sassguide/install.html 使用淘宝的镜像地址. $ gem sources --remove https://rubygems.org/ $ gem sour