是否可以将一个类或标签别名为SASS或LESS中的另一个类或标签?

问题描述

我正在尝试使用Less或Sass使bootstrap 2.1标记更具语义.考虑Bootstrap的标准导航栏的以下标记:

I am trying to make my bootstrap 2.1 markup more semantic using Less or possibly Sass. Consider the following markup for Bootstrap's standard navigation bar:

<header id="main-nav" class="navbar navbar-static-top" role="banner">
    <nav class="navbar-inner" role="navigation">
        <div class="container">

            <!-- Collapse nav button -->
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <!-- Nav -->
            <nav id="navlinks" class="nav-collapse collapse pull-right">
                <ul class="nav nav-pills">
                    <li class="active">@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </nav>
        </div>
    </nav>
</header>

很显然，将DIV更改为更具语义的HTML 5标签是很容易的，但是从标记中删除类链更加困难.如果您要使用mixin，例如:

Obviously, it is easy to change DIVs to more semantic HTML 5 tags, but removing the chain of classes from the markup is more difficult. If you were to use mixins like:

header #main-nav {
    .navbar;
    .navbar-static-top;
}

以下定义不起作用，因为复合类不受影响:

The following definition wouldn't work because compound classes are not effected:

.navbar .btn-navbar {
    display: none;  // hide button in full width (Why a compound class? Redundant?)
}

理想地，如果less或sass具有这样的语法，那将是很好的:

Ideally, it would be nice if less or sass had such a syntax:

header#main-nav $= .navbar;  // copy .navbar definitions using #main-nav as the name

或

header#main-nav @= .navbar;  // rename .navbar definitions to #main-nav

可以做到吗?如果没有，如何实现语义标记?

Can this be done? If not, how can I achieve semantic markup?

推荐答案

您所说的没有别名，但是LESS和Sass都可以这样写:

There is no aliasing as you say it, but LESS and Sass both have the ability to write like this:

.navbar, #main-nav {
    .collapse {}
}

输出如下:

.navbar .collapse, #main-nav .collapse {}

Sass有一个称为@extend的唯一指令，其功能如下:

Sass has a unique directive called @extend, which functions like this:

%common-styles {
    .collapse {}
}

.navbar {
    // unique navbar styles
    @extend %common-styles
}

#main-nav {
    // unique main-nav styles
    @extend %common-styles
}

在这种简化的情况下，输出将与第一个输出相同，但是允许您以优雅的方式添加其他样式.

The output would be identical to the output of the first for this simplified case, but allows you to add additional styling in an elegant way.

已更新的疑问句:

我非常谨慎地使用类，只是将元素的集合描述为一个整体(这是电影列表吗?是否是有关客户端的信息?是对动作元素的调用吗?)，并让后代选择器处理休息.使用CSS预处理程序时，链类(ala OOPCSS)基本上是不必要的:它可以为您组装样式.

I use classes very sparingly, only to describe the collection of elements as a whole (is it a movie listing? Is it information about a client? Is it a call to action element?) and let descendant selectors take care of the rest. Chained classes (ala OOPCSS) are largely unnecessary when using a CSS Preprocessor: it can assemble styles for you.

在理论上的Sass引导程序中，无论我们设计的站点是什么，我们都可以定义一些我们想重用于导航元素的东西(LESS的语法略有不同，但是它也可以这样做).

In a theoretical Sass bootstrap, we might define a few things we like to reuse for navigation elements no matter what site we are designing (LESS has a slightly different syntax, but it can do this too).

@mixin drop-menu { // intended for use with ordered or unordered lists that contain unordered lists
    & > li {
        @include inline-menu;
        ul { display: none }
        &:hover {
            ul { display: list }
        }
    }
}

@mixin inline-menu { // use with ordered or unordered lists if you'd like
    display: inline;
    margin-right: 1em;
    & + li { margin-left: 1em; border-left: 1px solid }
}

@mixin subtle-box { // just a box with a subtle gradient and slightly rounded corners
    linear-gradient(white, #CCC);
    border-radius: .25em;
    padding: .5em;
}

@mixin clearfix {
    &:after {
        content: " ";
        display: table;
        clear: both;
    }
}

在您要求成为CSS之前，这些项目都不是CSS的一部分.

None of these items are part of your CSS until you ask them to be.

body > header nav { // this is our main navigation element
    @include drop-menu;
    @include subtle-box;
    color: blue;
    font-family: garamond, serif
}

nav.admin {
    @include inline-menu;
    color: orange;
}

section.gallery {
    @include clearfix;
    img { float: left; padding: 0 10px 10px 0 }
}

现在，如果您有多个非常不同的元素，但是有很多相同的样式，请务必使用原始答案中提到的@extend指令.

Now if you have multiple elements that are very different but have a good chunk of styling in common, by all means use the @extend directive mentioned in the original answer.

如果您要在Sass和LESS之间做出选择，那么Sass具有更多的功能(例如非常酷的@extend指令，函数，列表等).我最初选择LESS的原因是它具有一个不错的第三方Windows编译器，因此我不必在虚拟机上安装Ruby，而是一直反对该语言(这些变量变量毫无用处！).

If you're deciding between Sass and LESS, Sass has considerably more features (like the really cool @extend directive, functions, lists, etc.). I initially chose LESS because it had a nice 3rd party Windows compiler so I didn't have to install Ruby on my virtual box, but fought against the language constantly (these variable variables are useless!).

这篇关于是否可以将一个类或标签别名为SASS或LESS中的另一个类或标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！