点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

几个实用的Sassmixins_html/css_WEB-ITnose

来源：动视网责编：小采时间：2020-11-27 16:20:00

几个实用的Sassmixins_html/css_WEB-ITnose

几个实用的Sassmixins_html/css_WEB-ITnose:Mixins 是 Sass (其实很多预处理语言都有) 中用来方便地复用代码的方法，你可以简单点理解成函数，返回的是一组 CSS 属性或代码。 @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radiu

推荐度：

点击下载本文 文档为doc格式

导读几个实用的Sassmixins_html/css_WEB-ITnose:Mixins 是 Sass (其实很多预处理语言都有) 中用来方便地复用代码的方法，你可以简单点理解成函数，返回的是一组 CSS 属性或代码。 @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radiu

Mixins 是 Sass (其实很多预处理语言都有) 中用来方便地复用代码的方法，你可以简单点理解成函数，返回的是一组 CSS 属性或代码。

@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius;}.box { @include border-radius(10px); }

上面的代码处理后，将得到下面 CSS 代码。

.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px;}

如果你对 Sass 不熟悉，可以先去学习一番，让我们进入主题，介绍几个实用的 mixins。

Absolute Position

如果你的页面中经常用到 absolute 定位，你可以试试下面这个：

@mixin abs-pos ($top: auto, $right: auto, $bottom: auto, $left: auto) { top: $top; right: $right; bottom: $bottom; left: $left; position: absolute;}

使用

.abs { @include abs-pos(10px, 10px, 5px, 15px);}

产出

.abs { top: 10px; right: 10px; bottom: 5px; left: 15px; position: absolute;}

带有优雅降级地使用 rem 单位

熟悉 rem 单位的前端er是否遇到过不支持的浏览器？你如何解决的呢？下面这个 mixin 我们加上 px 单位作 fallback：

@function calculateRem($size: 16) { $remSize: $size / 16px; @return $remSize * 1rem;}@mixin font-size($size) { font-size: $size; font-size: calculateRem($size);}

使用

p { @include font-size(14px)}

产出

p { font-size: 14px; font-size: 0.8rem;}

Clearfix

网上有很多 clearfix 的 hacks，下面这种比较常见，兼容到 IE6以上

@mixin clearfix() { &:before, &:after { content: ""; display: table; } &:after { clear: both; }}

使用

.container { @include clearfix();}

When-inside

个人比较中意的 mixin，常用在修改元素在不同状态下的属性。比如我们的H5页面会给当前页面加个 active类名，我们想让当前页面中的 foo对象执行动画。

/// Make a context based selector a little more friendly/// @author Hugo Giraudel/// @param {String} $context@mixin when-inside($context) { #{$context} & { @content; }}

使用

.foo { @include when-inside('.active') { animation: fadeIn 0.3s 1s forwards; }}

产出

.active .foo { animation: fadeIn 0.3s 1s forwards; }

方便的媒体查询

媒体查询再做响应式网站时候，非常方便。如果下面的代码满足不了你的需求的话，那么推荐你看之前的文章《使用Sass之更高级的媒体查询》

$breakpoints: ( 'sm': 'only screen and (min-width: 480px)', 'md': 'only screen and ( min-width: 768px)', 'lg': 'only screen and ( min-width: 992px)') !default;@mixin respond-to($breakpoint) { $query: map-get($breakpoints, $breakpoint); @if not $query { @error 'No value found for `#{$breakpoint}`. Please make sure it is defined in `$breakpoints` map.'; } @media #{if(type-of($query) == 'string', unquote($query), inspect($query))} { @content; }}

用法

.foo { @include respond-to('sm') { padding-left: 20px; padding-right: 20px; }}

产出

@media only screen and (min-width: 480px) { .foo { padding-left: 20px; padding-right: 20px; } }

长阴影

这个mixin可能不常用，但是效果真的很酷~

@function makelongshadow($color) { $val: 0px 0px $color; @for $i from 1 through 200 { $val: #{$val}, #{$i}px #{$i}px #{$color}; } @return $val;}@mixin longshadow($color) { text-shadow: makelongshadow($color);}

使用

h1 { @include longshadow(darken($color, 5% ));}

效果

See the Pen Long Shadow Sass Mixinby Helkyle ( @HelKyle) on CodePen.

几个实用的Sassmixins_html/css_WEB-ITnose

推荐度：

点击下载本文 文档为doc格式

标签： html css web

热门焦点

几个实用的Sassmixins_html/css_WEB-ITnose

几个实用的Sassmixins_html/css_WEB-ITnose

Absolute Position

使用

产出

带有优雅降级地使用 rem 单位

使用

产出

Clearfix

使用

When-inside

使用

产出

方便的媒体查询

用法

产出

长阴影

使用

效果

几个实用的Sassmixins_html/css_WEB-ITnose

最新推荐

猜你喜欢

热门推荐