Question

是否有可能在Sass中使用三元条件，特别是在类对象上？看起来像：

ordermonth  qty
1           4134
10          6454
11          9780
12          4000
2           5548
3           6970
4           3543
5           3309
6           4251
7           4997
8           6134
9           6926
Total      66046

Answer 1

是的，我刚刚才发现自己。

$caretTop: 'top: -45';
$caretTop: 'top: 45' !default;

基本上，如果您未设置变量，则将其默认设置为第一个值“ top：45”（如果您设置了变量），则它将保持不变。

Answer 2

这取决于你想要实现的目标，但是在这里你有一个mixin遍历元素列表的例子和一个用于改变值的三元运算符。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

<include
    android:id="@+id/toolbar_layout"
    layout="@layout/app_toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@id/toolbar_layout"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <FrameLayout
        android:id="@+id/activityMainContent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/colorPrimary"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:itemTextColor="@android:color/white"
        app:menu="@menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>

如果您想要更多元素或设置属性，请使用地图而不是列表（那么，您可能不需要任何三元运算符）：

netstat

Answer 3

不需要按类属性选择器进行匹配。你所要做的就是一个简单的循环和一些插值

$caret-types: ((left -45px), (right 45px));
@each $caret in  $caret-types{
  $name: nth($caret, 1);
  $offset: nth($caret, 2);
  .fa-caret-#{$name}{
    top: $offset;
  }
}

编译为

.fa-caret-left {
  top: -45px;
}
.fa-caret-right {
  top: 45px;
}

Answer 4

我将使用我的SASS语法版本进行更新。必须在此处跳过引号，并且也不允许使用空值。如果您需要一个空字符串，则必须使用()语法：

$fontSizes: ("xx": 28, "xl": 20, "lg": 15)
$lineSizes: ("xx": 38, "xl": 25, "lg": 20)
$fontWeights: ("normal": 400, "regular": 400, "semibold": 600, "bold": 700)

=custom-font($fontSizeName, $fontWeightName, $important: false)
  font-size: map-get($fontSizes, $fontSizeName) / 16 + rem if($important==true,!important,())

.title
  +custom-font("xx", "semibold", true)

Answer 5

@ llobet的答案很棒，但您也可以使用变量。

$position: left;

[class*="fa-caret-"]{
   top: if($position == left, -45, 45);
}

$position: right;

Sass上课的三元条件

5 个答案: