AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

整站scss设计 by 结一

发布者 FEer   简介 前端技术
发布于 1456275573549  浏览 2246 关键词 CSS, 前端 
分享到

第1页

整站scss设计
结一 (imweb)

第2页

why scss

第3页

变量
1、颜色
2、z-index层级

第4页

第5页

@import
告别css @import的鸡肋,让css真正走向模块化

第6页

第7页

层级嵌套
层级嵌套,视觉更美观,管理更方便

第8页

第9页

@mixin & %
充分利用代码片段

第10页

第11页

scss支持如何

第12页

1、是否支持css3
2、是否支持响应式
3、是否支持低端浏览器(ie6-8)

第13页

第14页

第15页

第16页

第17页

scss常见问题

第18页

scss如何入门
sass guide

第19页

安装
https://rubygems.org被墙

第20页

版本
查看版本:        sass -v
安装pre版本:   gem install sass --pre
升级版本:        gem update sass
卸载:                gem uninstall sass

第21页

后缀名
filename.sass

filename.scss

第22页

第23页

文件名
filename.scss

_filename.scss

第24页

第25页

中文乱码
文件头部添加@charset "UTF-8";

第26页

@import
下划线及后缀名都可以省略

      @import “_help.scss”;
      @import “help”;

第27页

变量
$color:    #fff;
$color:    #fff !defalut;
$color:    #fff !global;

第28页

第29页

@mixin 和 %
@mixin:可传递参数,生成样式拷贝

%: 无参数,生成样式提升到css文件头部组合申明

第30页

第31页

@extend
@extend .class

@extend %placeholder

第32页

第33页

图片路径
以最终生成的css文件路径为准

第34页

第35页

调试
开启sourcemap(sass 3.3+)
1、编译生成sourcemap文件
2、浏览器开启sourcemap调试

第36页

生成sourcemap
SASS命令行
编译工具,koala/prepros

第37页

生成sourcemap
grunt-sass
gulp-sass, gulp-sourcemaps

第38页

浏览器开启sourcemap调试
chrome

第39页

浏览器开启sourcemap调试
firefox

第40页

第41页

制定scss规范

第42页

1、所有导入文件以 _ 开头
2、可覆盖变量定义时加上 !default
3、变量及@function采用驼峰式命名
4、@mixin,%采用中划线命名
5、@mixin中参数有默认值的放在没有默认值前面
6、模块文件的变量在模块文件头部申明
7、如需@extend,请先设计成%

第43页

scss文件组织管理

第44页

组织全览

第45页

common.scss

第46页

公用库设计

第47页

sandal

第48页

组件设计

第49页

第50页

编码声明
文件说明
结构注释
变量声明
导入依赖
样式代码
_steps.scss

第51页

第52页

谢谢
qq群:78142855, 65581022, 1041263
支持文件格式:*.ppt, *.pptx, *.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。