sass中常用的mixin封装
- 网站整体居中
@mixin site-center($width: 960px) {
width: $width;
margin: 0 auto;
}
- clearfix清除浮动
@mixin clearfix() {
&before,
&after {
content: '';
display: table;
}
}
- 圆角边框
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
- 浏览器前缀
@mixin css3($property, $value) {
@each $prefix in -webkit-,
-moz-,
-ms-,
-o-,
'' {
#{$prefix}#{$property}: $value;
}
}
- 动画keyframes生成
@mixin keyframes($animationName) {
@-webkit-keyframes #{$animationName} {
@content;
}
@-moz-keyframes #{$animationName} {
@content;
}
@-o-keyframes #{$animationName} {
@content;
}
@keyframes #{$animationName} {
@content;
}
}
- 文本溢出用...显示
@mixin text-ellipsis () {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性
- 纯css实现三角形
/* 箭头
arrow(direction, size, color);
*/
@mixin arrow($direction, $size, $color) {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
overflow: hidden;
border-width: $size;
cursor: pointer;
@if $direction == top {
border-style: dashed dashed solid dashed;
border-color: transparent transparent $color transparent;
border-top: none;
}
@else if $direction == bottom {
border-style: solid dashed dashed dashed;
border-color: $color transparent transparent transparent;
border-bottom: none;
}
@else if $direction == right {
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent $color;
border-right: none;
}
@else if $direction == left {
border-style: dashed solid dashed dashed;
border-color: transparent $color transparent transparent;
border-left: none;
}
}
- 媒体查询
@mixin screen($min,$max){
@media screen and (min-width:$min) and (max-width: $max){
@content; //@content代表内容是自定义的
}
}
@mixin min-screen($width){
@media screen and (min-width: $width){
@content;
}
}
@mixin max-screen($width){
@media screen and (max-width: $width){
@content;
}
}
Sass中的mixin和%placeholder的本质区别
- mixin基本用法
@mixin box($width: 100px, $height: 100px) {
width: $width;
height: $height;
box-shadow: 0 0 5px black;
margin: 10px;
}
.smallBox {
@include box(100px, 100px);
}
.bigBox {
@include box(200px, 200px);
}
编译后的代码：
.smallBox {
width: 100px;
height: 100px;
box-shadow: 0 0 5px black;
margin: 10px;
}
.bigBox {
width: 200px;
height: 200px;
box-shadow: 0 0 5px black;
margin: 10px;
}
可以看到，Mixin不过是将代码复制了一块
- %placeholder的基本用法
%placeholder 与 Mixin 差不多，但是不能传入参数。而且他不是直接复制代码块，而是将共有的属性提到前面，然后使用这两个 div 的选择器一起去调用。
%box {
box-shadow: 0px 0px 5px black;
margin: 10px;
}
.smallBox {
@extend %box;
width: 100px;
height: 100px;
}
.bigBox {
@extend %box;
width: 200px;
height: 200px;
}
编译后的代码：
.smallBox, .bigBox {
box-shadow: 0px 0px 5px black;
margin: 10px;
}
.smallBox {
width: 100px;
height: 100px;
}
.bigBox {
width: 200px;
height: 200px;
}
总结
我们会发现，在编译后，%placeholder会帮我们把重复引用的代码进行合并，但是使用mixin的时候并不会，并且，不能%placeholder不能传递参数，只能定义一段重复的代码段，而mixin可以传参数，封装一些需要传参数的代码
利用placeholder进行性能优化
- 通过上面的比较，我们可以知道，利用%placeholder能将重复代码合并的特性，将现有的css重复样式抽离出来，根据代码的块的不同拆分成多个不同的%placeholder
大型项目的sass目录该如何组织
通过搜索相关资料，总结出以下几个构建文件的目录以及其详情:
- Base
base/ 文件夹包含了项目中一些相关的基础样式，比如normalize.css和一些关于文本排版方面的
- Helpers
helpers/文件夹（或utils/）主要包含了项目中关于Sass的工具和帮助之类。在里面放置了我们需要使用的_function.scss，和_mixin.scss。在这里还包含了一个_variables.scss文件（有的地方也称其为_config.scss），这里包含项目中所有的全局变量（比如排版本上的，配色方案等等）。
_variables.scss
_mixin.scss
_function.scss
_placeholders.scss(也有称为_helpers.scss)
- Layout
layout/文件夹(有时也称为partials/)中放置了大量的文件，每个文件主要用于布局方面的，比如说"header"，“footer”等。他也会包括_grid.scss文件，用来创建网格系统。
_grid.scss
_header.scss
_footer.scss
_sidebar.scss
_forms.scss
- Components
对于一些小组件，都放在了components/文件夹（通常也称为modules/）
_media.scss
_carousel.scss
_thumbnails.scss
- Page
如果你需要针对一些页面写特定的样式，我想将他们放在page/文件夹中，并且以页面的名称来命名。例如，你的首页需要制作一个特定的样式，那么你就可以在page/文件夹中创建一个名叫_home.scss文件。
- Themes
要为一个大型的网站制作多个主题，那么有一个theme/文件夹是非常有意义的。你可以把主题相关的文件放在这个文件夹中。
_theme.scss
_admin.scss
- Vendors
主要用来包含来自外部的库和框架的CSS文件。比如Bootstrap,jQueryUI。把这些文件放在同一个文件夹中。
例如：
bootstrap.scss
jquery-ui.scss
config.rb的其它配置项及作用
# import-once 保证后面如果重复引用了模块，那么只会使用一次，虽然引用了多次，但不会报错
# 例如 import 'compass/reset' ... import 'compass/reset' 只会使用一次
# 但是如果真的需要引用两次，那么怎么办呢？这样写 import 'compass/reset!' 在后面添加 !
require 'compass/import-once/activate'
# 可以使用compass-normalize来替换掉原来的compass/reset
require 'compass-normalize'
# 解析后的显示方式
# 如果项目即将上线，就需要压缩CSS以确保文件尽可能的小，这时候只需要把output_style设置为：compressed
# output_style = :expanded or :nested or :compact or :compressed
output_style = :expanded
# 样式打包发布后的根目录
http_path = "/"
# 存放css文件的目录
css_dir = "css"
# 存放sass的目录
sass_dir = "sass"
# 存放图片的目录，当在css或者sass中引入的时候，不需要加上img这个目录
images_dir = "img"
# 存放js的文件目录
javascripts_dir = "js"
# 取消生成注释
line_comments=true
# 当我们编译Sass文件时，在我们的根目录会出现.sass-cache文件夹，看文件夹名就知道这里放的该是Sass缓存文件，设置为true可以帮我们加快sass文件的编译
cache = true
# 使用相对路径进行查找文件
# relative_assets = true
# 设置开发或者生产环境
# enviroment = :production :development
# 设置偏向的语法 :sass :scss
# preferred_syntax = :sass
