`
zhangyaochun
  • 浏览: 2609028 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

sass之triangle

    博客分类:
  • sass
阅读更多

 

   

@mixin triangle($direction,$size,$borderColor) {
     content:  "";
     height: 0;
     width: 0;

     @if $direction == left {
            border-right: $size solid $borderColor;
            border-top: $size solid transparent;
            border-bottom: $size solid transparent;
     }

     @else if $direction == right {
            border-left: $size solid $borderColor;
            border-top: $size solid transparent;
            border-bottom: $size solid transparent;
     }

     @else if $direction == top {
            border-bottom: $size solid $borderColor;
            border-right: $size solid transparent;
            border-left: $size solid transparent;
     }

     @else if $direction == bottom {
            border-top: $size solid $borderColor;
            border-right: $size solid transparent;
            border-left: $size solid transparent;
     }
}

 

分享到:
评论

相关推荐

    css-triangle-mixin:使用SASSCSS Triangle生成器mixin。 是否以完全可自定义的尺寸显示所有8个基本方向

    `css-triangle-mixin` 是一个利用SASS(Syntactically Awesome Style Sheets)编写的CSS Mixin,它提供了一个方便的方法来生成不同方向、可自定义尺寸的三角形。SASS是一种CSS预处理器,它允许我们使用变量、嵌套...

    triangle-ember-06-15-2015:Triangle Ember 的演示文稿

    **三角洲之火:Triangle Ember 演示文稿** Triangle Ember 是一个基于 JavaScript 的开源项目,这个项目在2015年6月15日进行了演示,旨在介绍和展示 Ember.js 框架的强大功能。Ember.js 是一个用于构建用户界面的...

    前端项目-triangles.zip

    4. **SASS/LESS预处理器**:项目可能使用了SASS或LESS这样的CSS预处理器,以提高代码的可维护性和可扩展性,通过变量、嵌套规则和混合等功能增强CSS的功能。 5. **响应式设计**:考虑到现代Web开发的需求,项目可能...

    前端开源库-bourbon.zip

    - `triangle`: 创建纯CSS的三角形,常用于下拉菜单箭头。 - `position`: 为元素设置绝对或相对定位,简化CSS定位的编写。 - `Vendor Prefixes`: 自动处理浏览器前缀,确保跨浏览器兼容性。 4. **Bourbon的函数...

    itcss::tiger_face:ITCSS代码示例

    ITCSS(Inverted Triangle CSS)是一种组织CSS代码的架构方法,旨在解决大型项目中的样式冲突、维护困难和可扩展性问题。它通过分层结构来管理CSS,使得样式具有清晰的优先级和职责划分,从而提高了代码的可读性和可...

    CSS中的层分离编程详解

    这种方法在Sass partials和ITCSS(Inverted Triangle CSS)架构中特别有用,因为它有助于在大型项目中定位和管理CSS文件。 层分离编程还强调减少嵌套选择器的使用,从而降低CSS权重,提升性能。较小的CSS文件意味着...

    10 个有用免费 CSS3 强大工具

    10. **Sass & Compass**:Sass是一种CSS预处理器,Compass则是其一个强大的框架,它们能帮助开发者编写更简洁、模块化的CSS代码,提高效率并降低维护难度。 以上这些免费CSS3工具覆盖了从设计到开发的各个环节,...

    itcss-sample:一个简单的ITCSS结构示例

    ITCSS(Inverted Triangle CSS)是一种组织CSS代码的架构方法,旨在提高大型项目的可维护性和可扩展性。这个“itcss-sample”是一个基于ITCSS原则的简单示例,用于展示如何构建一个清晰、有序的CSS代码库。让我们...

    awesome-itcss:精选的ITCSS优秀文章,视频和代码示例清单

    ITCSS,全称为“Inverted Triangle CSS”,是一种用于组织大型CSS项目的架构方法。它通过将样式规则分解为多个独立的层,帮助开发者实现更高效、可维护的CSS代码。这个"awesome-itcss"资源集合正是为了帮助开发者更...

    jquery css3三角形菜单图片切换代码

    在实际开发中,确保代码的可维护性和性能优化也是至关重要的,比如使用模块化开发(如ES6模块或CommonJS),以及使用CSS预处理器(如Sass或Less)提高CSS的可复用性和可维护性。 总之,结合jQuery和CSS3,我们可以...

    CSS 学习 三角 border transparent 下拉框

    标签中的“源码”提示我们可能需要查看具体的代码实现,而“工具”可能指的是开发者可能会用到的一些CSS预处理器(如Sass、Less)或者库(如Bourbon),这些工具可以帮助简化CSS编写并提供一些实用的函数。...

    scss-shapes:用于scs的形状mixin集合

    SCSS(Sass CSS)是一种预处理器语言,它扩展了CSS的功能,允许我们使用变量、嵌套规则、函数和模块化等编程特性来编写更整洁、可维护的样式表。"scss-shapes"是一个专门为SCSS编写的库,提供了一系列的mixin(混合...

    generator-chisel:Chisel是一个开发框架,用于创建易于维护和快速的WordPress网站。

    3. **Webpack集成**:Chisel的最新版本使用Webpack进行资源管理和打包,这使得CSS和JavaScript的组织更加有序,支持预处理器(如Sass或Less)、自动注入依赖、代码分割和懒加载等功能,从而优化网站性能。...

    详解纯CSS3制作的20种loading动效

    12. **Ball Triangle Path**:球体沿三角形路径移动,创造出复杂且有趣的运动轨迹。 13. **Ball Scale**:一个球体在动画过程中逐渐扩大至充满整个容器,然后缩小回原始大小。 14. **Line Scale**:五条线按顺序...

    scss-mixins-collection:方便的scss mixins的集合

    SCSS-MIXINS-COLLECTION 方便的scss mixins的集合。安装您可以通过npm安装它: npm install --save-dev scss-mixins-collection 或者,如果愿意,可以通过Bower: bower install scss-mixins-collection然后只需@...

Global site tag (gtag.js) - Google Analytics