mixin.stylus

最新推荐文章于 2022-08-25 11:07:20 发布

前端wa

最新推荐文章于 2022-08-25 11:07:20 发布

阅读量355

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Mrswater/article/details/91520769

本文深入探讨了CSS中关键技巧的应用，包括如何设置背景图片、文本溢出处理以及扩展元素的点击区域，为前端开发者提供了实用的代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 背景图片

bg-image($url)

background-image: url($url + "@2x.png")

background-position: center center

background-repeat: no-repeat

background-size: 100%

@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)

background-image: url($url + "@3x.png")

background-position: center center

background-repeat: no-repeat

background-size: 100%

// 不换行

no-wrap()

text-overflow: ellipsis

overflow: hidden

white-space: nowrap

// 省略号显示

ellipsis($num)

overflow hidden

text-overflow ellipsis

display -webkit-box

-webkit-box-orient vertical

-webkit-line-clamp $num

// 扩展点击区域

extend-click()

position: relative

&:before

content: ''

position: absolute

top: -10px

left: -10px

right: -10px

bottom: -10px

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端wa

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

nuxt 项目配置对 less、sass、stylus 预处理器的支持

小青蛙的博客

08-12

5578

nuxt 配置对less、sass、stylus的支持导读在项目开发的过程中呢，在编写项目样式的时候，很多童鞋喜欢使用css预处理器进行方便快捷的开发，所以说，让我们的项目支持预处理器是非常有必要的；这章节呢，我们项目新增对 stylus、less、sass 这三款比较常用的css预处理器工具的支持；我们可以去到官网查看文档：https://zh.nuxtjs.org/api/conf...

Sass、Scss、Less和Stylus区别总结

efew212efe的博客

05-04

2159

Sass、Scss、Less、Stylus CSS 预处理器技术已经非常的成熟了，而且也涌现出了越来越多的 CSS 的预处理器框架。本文便总结下 Sass、Less CSS、Stylus这三个预处理器的区别和各自的基本语法。简言之可以理解scss是sass的一个升级版本，完全兼容sass之前的功能，又有了些新增能力。语法形式上有些许不同，最主要的就是sass是靠缩进表示嵌套关系，scss是花括号 //sass 太费眼了 .father width:100px; .son

参与评论您还未登录，请先登录后发表或查看评论

saffron-stylus:一个简单的Stylus mixin库，用于动画和过渡

05-16

藏红花手写笔一个简单的Stylus mixin库，用于动画和过渡。 Saffron-stylus是Stylus mixins和辅助程序的集合，使添加CSS3动画和过渡变得更加简单。只需在Stylus声明中包含mixin，然后使用变量和mixin参数设置任何配置即可。这是原始 sass mixin库的端口，减去供应商前缀。现在，任何前缀都应使用或类似的东西处理。安装 npm install saffron-stylus --save 手动安装从GitHub下载或克隆项目仓库。复制saffron-stylus文件夹，然后粘贴到styles文件夹（或任何您称呼的文件夹）中。您将不需要任何其他目录或文件。用法 // import the whole library @import "saffron-stylus/styles" // or just the mixins yo

浅谈 stylus--＞mixin

weixin_43754182的博客

04-21

493

想知道stylus和mixin是什么意思，就需要先知道它们存在的原因—— 为了使css变得更加可维护，简单来说，就是可以在css中用变量定义特定属性值，可以用函数定义对css进行封装。关于变量，创建vribales.styl文件，代码： $bgColor = #00bcd4 $darkTextColor = #333 $headerHeight = .86rem 关于封装，mixin可以使css中一段样式代码封装在函数定义里，同样的，也是在.styl文件进行定义：mixin简单讲就是函数定义。（当然这不

stylus之混合书写(Mixins)

tian361zyc的博客

05-26

3871

混合书写(Mixins)

stylus里使用mixin实现1像素边框

guochao8的博客

02-01

579

1、新建mixin文件 mixin.styl border-1px($color) position relative &:after display block position absolute left 0 bottom 0 width 100% border-top: 1px solid $color conten...

03-25

08-29

4. **混合（mixin）**：混合是Stylus中的一个重要特性，可以将一组样式规则打包为一个函数，然后在需要的地方调用。这有助于代码的复用： ```stylus button($bg) background $bg border-radius 5px padding 10...

stylus-1.5.25.zip

06-02

@import 'mixin' ``` 6. **自定义函数与插件**：Stylus允许开发人员创建自己的函数和插件，进一步扩展其功能。这使得Stylus成为一个高度可定制的工具，适应各种项目需求。 7. **源地图支持**：Stylus在编译时...

xmixins:与LESS，SASS和Stylus兼容的超级css mixin库！

05-11

兼容的主要CSS预处理器（LESS，SASS和Stylus）。为不同CSS预处理器提供相同的mixin。完全符合CSS3规范（CSS3 mixins）。与许多终端（台式机，平板电脑和移动终端）兼容。安装非常容易（与Compass相比）。 1...

前端css mixin stylus汇总--持续更新

qq_39373940的博客

05-06

343

/* 多行显示 */ // 多行省略 line-camp($clamp = 2) if ($clamp == 1) overflow hidden text-overflow ellipsis // 文本溢出显示省略号 white-space nowrap // 文本不会换行（单行文本溢出） else overflow hidden text-ove...

create-react-app（CRA）配置stylus，同时配置全局mixin和variable

笑颜铁塔的博客

08-25

403

cra配置stylus

使用Mixin

fengyjch

02-28

953

http://web.jobbole.com/91664/It's a common situation: you have two components that are pretty similar, they share the same basic functionality, but there's enough that's different about each of them t...

使用stylus编写bg-image（）实现网页图标自适应dpr数值来识别2x图或者3x图

SilenceJude的博客

08-25

2661

mixin.styl： bg-image($url)//默认2x图，dpr为3则使用3x图 background-image: url($url+&amp;quot;@2x.png&amp;quot;) @media (-webkit-min-device-pixel-ratio: 3),(-min-device-pixel-ratio: 3) background-image: url($url+&amp;quot;@3x.png...

stylus调用mixin函数

tjzc1352640的博客

10-25

4441

新建mixin.styl bg-image($url) background-image: url($url + "@2x.png")在css中调用 .icon margin-top: 6px width: 30px height: 32px bg-image('logo')

stylus 为啥要加入 ~ @import '~common/stylus/mixin'

kiven_wolf的专栏

10-23

6626

stylus 为啥要加入 ~ @import '~common/stylus/mixin'

VUE + Stylus 切换主题颜色实现换肤

Bottle_jiu的博客

06-06

3248

Vue + Stylus 切换主题颜色引言在第一次听项目中需要切换主题的时候感觉挺好解决的，不就是切换个主题颜色吗，但是真正轮到自己上手的时候就发现无从下手，于是在网上浏览了一些前端大牛写的文章，发现现在使用Css预编译处理比较推荐我就尝试了一下，由于项目中使用的是Stylus，所以文本具体介绍使用Stylus实现主题切换，话不多说，直接开始：准备如果项目中没有引入Stylus，请先引入Stylus。准备工作完成之后开始干活主要思路是使用js控制切换data-theme的值来控制换肤 1. 新建

@import ‘./common/stylus/mixins.styl‘引起的一系列错误

weixin_46331416的博客

09-22

1857

@import './common/stylus/mixins.styl’引起的一系列错误环境：vue-cli 4 代码： <template> <div> <h1>App 组件</h1> <button class="btn btn1">按钮1</button> <button class="btn btn2">按钮2</button> <ul>

css里的&符号是代表什么意思呢？