SASS+COMPASS 自适应 学习笔记

简介: 来源 http://snugug.github.io/RWD-with-Sass-Compass/#/ 1 安装 COMPASS 扩展 安装 方式 gem 'extension', '~>X.Y.Z' 命令行安装require '{extension}'@import '{extension}'; sass 文件导入 扩展1http://breakpoint-sass.

来源 http://snugug.github.io/RWD-with-Sass-Compass/#/

1 安装 COMPASS 扩展

安装 方式

gem 'extension', '~>X.Y.Z'   命令行安装
require '{extension}'
@import '{extension}'; sass 文件导入
 
扩展1
http://breakpoint-sass.com/
扩展2
http://singularity.gs/
    3 盒子模型
@import 'compass';

// We switch our box model to Border Box.
// From Paul Irish
*, *:before, *:after {
  @include box-sizing('border-box');
}
扩展 4
http://sasstoolkit.com/
 
test
相关文章
|
11月前
|
缓存 Linux Windows
certutil工具使用和bypass学习
certutil工具使用和bypass学习
519 0
使用 sass + rem + flexible.js 实现大屏自适应
使用 sass + rem + flexible.js 实现大屏自适应
133 0
使用 sass + rem + flexible.js 实现大屏自适应
|
前端开发 JavaScript UED
第八章 webpack5优化处理CSS
介绍如何优化css资源
101 0
|
前端开发
零基础CSS入门教程(2)——CSS如何应用
上一篇介绍了CSS的作用,就是用来设置网页的样式的。本篇就用一个最基础的入门实例,来展示下CSS是如何将样式应用到网页上好的,现在我们想将绿色这个样式应用到上面的第一个标签,也就是下面这段代码上。 那么如何应用呢,其实可以通过HTML的style属性来实现。也就是说,style属性的值就是我们要编写的CSS代码部分。通过style属性,我们可以将CSS样式代码应用到指定的标签上。看下面的代码,我们给p标签设置了style样式,style属性的值color:aquamarine;就是CSS代码 效果如下 从上
零基础CSS入门教程(2)——CSS如何应用
|
前端开发
零基础CSS入门教程(1)——认识css
我们这一下小节认识一下css,什么是css,css是干什么的。CSS是层叠样式表的简称,有时可以称为CSS样式表或者级联样式表,也是一种标记语言,主要用于设置HTML页面中的文本内容,图片的外形或者版面的布局以及外观样式,可以称为网页美容师。 CSS最大价值:由HTML专注去做结构呈现,样式由CSS来完成,即结构(HTML)和样式(CSS)相分离CSS规则由两个主要的部分组成:选择器以及一条或多条声明(通俗理解为:选择器即为给谁改样式,多条声明为改成什么样式) 一般将CSS写在中,将HTML写在中,这样就
零基础CSS入门教程(1)——认识css
|
前端开发
零基础CSS入门教程(8)——CSS设置字体
我们前几个小结学习了,css的选择器,和及基本的改变字体颜色。我们这一小结学习一下设置字体的一些功能(1)font-size这个是设置字体大小,浏览器一般默认字体是16px (2)font-weight 这个是字体加粗和html字体加粗一样效果正常是400或写normal 加粗值是700或写bold (3)font-style是设置字体倾斜和html字体倾斜一样效果,倾斜写italic,不倾斜写normal (4)font-family可以设置字体形式 在后面加sans-serif是无衬线字体写这个墓地为了
零基础CSS入门教程(8)——CSS设置字体
|
前端开发
零基础CSS入门教程(7)——CSS外联写法
我们前几个小结学习了选择器,我们这几个小结学习一下css外联写法,并且熟练运用。我们为什么要学习外联写法那,我们再写css的时候少量的代码我们可以写在html里面但是我们要是做项目或者工程我们就必须使用外联写法。目录 第一步新建html把外联样式导进来 外联css的代码 效果如下 我们这一小结学习了css外联写法,我们外联写法一般用在代码非常多的时候使用。
零基础CSS入门教程(7)——CSS外联写法
|
前端开发
零基础CSS入门教程(15)——颜色值
我们可以通过RGB,R代表红色,G代表绿色,B代表蓝色,来确定颜色值。实际上,在光学中,红、绿、蓝三种颜色被称为三原色,也就是说这三种光学颜色混合后,可以产生各种各样的颜色。基于三原色的原理,我们也可以通过设置红、绿、蓝颜色的比例,来确定一个特定的颜色。我们学会了颜色值,我们就可以自己去定义自己喜欢的颜色,使我们的页面五彩缤纷。世界是五彩缤纷的,不论是皑皑的白雪、还是飘落的秋叶,世界因色彩而绚丽。之前我们已经学习过设置文本的颜色,设置背景色,以及设置边框的颜色。同样,网页也因为合理搭配色彩,而美观。
零基础CSS入门教程(15)——颜色值
|
前端开发
零基础CSS入门教程(16)——外边距
可以通过margin-left/margin-right/margin-top/margin-bottom分别设定元素的左、右、上、下边距。物体的外边,指的就是外围的边界,对网页元素来说,外边就是元素最外面的边界。CSS之中,通过margin来设定元素的外边距,本篇就来说明下用法。那么外边距,就是一个物体的外边,与另一个物体的外边的距离。我们本小结学习了外边距,我们要学会使用外边距并熟练掌握。我们可以看到这两个按钮很丑,想让他们分开一点。我们第二按钮向下外边距10个像素。要理解外边距,先来说一下外边。
零基础CSS入门教程(16)——外边距
|
前端开发
零基础CSS入门教程(17)——内边距
我们可以通过padding-top、padding-right、padding-bottom、padding-left、,分别设置元素的上、右、下、做外边距。内边距、外边距的使用都很频繁,因此我们要合理熟练的使用内外边距,达到更好的效果。本篇来介绍内边距,顾名思义,内边距是指的元素内部的内容,与元素的边的距离。上一篇介绍了外边距,也就是元素跟相邻元素的距离。
零基础CSS入门教程(17)——内边距