SASS混入

Posted 2023-05-04

参考技术A SASS混入

@mixin

@mixin 定义一个可以在整个样式表中重复使用的样式

@include

@include 将混入（mixin）引入到文档中

一、定义混入

1.1语法

@mixin 混入名

  样式



1.2示例

//定义公共样式

@mixinimportant-text

color:#fff;

font-size:24px;

font-weight:1000;

border:2pxsolid#f00;



二、引用混入

2.1语法

.box

  @include 混入名;



2.2示例

.box

//引入公共样式

@includeimportant-text;

background-color:#f00;



三、混入引用混入

3.1语法

@mixin 混入名

  @include 混入名1;

  @include 混入名2;



3.2实例

//定义整体样式1

@mixinimportant-text

font-size:24px;

color:#f00;

;

//定义整体样式2

@mixinspecial-border

border:2pxsolid#ff0;

;

//混入引入混入

@mixinspecial-text

@includeimportant-text;

@includespecial-border;



//box引入

.box

@includespecial-text;



四、混入传入变量

//定义混入

@mixinnormal-border($width,$color)

border:$widthsolid$color;

;

//引入混入

.box1

@includenormal-border(2px,#f00);

;

.box2

@includenormal-border(10px,#00f);

;

Bootstrap-Sass 源码解析一：文件组织架构

解析环境

• “bootstrap-sass”: “~3.3.5”
• 项目地址：https://github.com/twbs/bootstrap-sass

前置学习

• SASS
• OOCSS

核心文件组织结构

bootstarp
|--Core variables and mixins     //核心参数和混入（类似函数）
    |-- variables                //核心参数设置
    |-- mixins                   //各种混入

|--Reset and dependencies        //页面重置和依赖
    |-- normalize                //https://github.com/necolas/normalize.css
    |-- print                    //打印格式化
    |-- glyphicons               //http://glyphicons.com/

|--Core CSS                      //核心组件
    |-- scaffolding              //脚手架：主要是对body，html等标签进行定制化的reset
    |-- type                     //排版相关
    |-- code                     //代码相关
    |-- grid                     //栅格系统
    |-- tables                   //表格相关
    |-- forms                    //表单相关
    |-- buttons                  //按钮相关

|--Components                    //组件
    |-- component-animations     //组件的淡出等动画
    |-- dropdowns                //点击下拉菜单组件
    |-- button-groups            //按钮组
    |-- input-groups             //表单输入组
    |-- navs                     //导航
    |-- navbar                   //导航条
    |-- breadcrumbs              //面包屑
    |-- pagination               //分页页码
    |-- pager                    //上一页下一页分页
    |-- labels                   //标签
    |-- badges                   //徽章
    |-- jumbotron                //超大屏
    |-- thumbnails               //缩略图
    |-- alerts                   //警告
    |-- progress-bars            //进度条
    |-- media                    //多媒体对象
    |-- list-group               //列表组
    |-- panels                   //面板(容器)
    |-- responsive-embed         //响应式嵌入
    |-- wells                    //一种会引起内容凹陷显示或插图效果的容器
    |-- close                    //关闭按钮

|--Components w/ JavaScript      //需要与js交互的组件
    |-- modals                   //模态框
    |-- tooltip                  //工具提示
    |-- popovers                 //弹出框
    |-- carousel                 //轮播

|--Utility classes               //工具类
    |-- utilities                //普通工具，如清除浮动等
    |-- responsive-utilities     //响应式布局相关