Biến SASS được đặt bên trong điều kiện?

Question

Tôi có thể đặt các biến bên trong của if/else có điều kiện trong SASS không? Ví dụ: bạn muốn có 2 bảng phối màu cho một trang. Suy nghĩ về cách thiết lập một lớp trên cơ thể để xử lý những khác biệt màu sắc, có thể giúp bạn làm như sau (viết cho tiếng Anh, chứ không phải cố gắng bất kỳ loại cú pháp chính xác):

If parent class is red then $main-color = #f00 else $main-color = #000 

Tôi có thể làm điều này?

Answer 1

Có, đây là thể:

$parent: true 
$foo: red 

@if $parent == true 
    $foo: blue 

p 
    color: $foo 

codepen

Nó đáng chú ý, tuy nhiên, bạn sẽ không thể sử dụng một điều kiện để kiểm tra một tài sản trên một yếu tố phụ huynh (hoặc bất kỳ yếu tố nào khác) trong SASS (xem this bài đăng từ lãnh đạo SASS), vì vậy parent class trong mã psuedo của bạn sẽ phải được lưu trữ trong một sass $variable.

Answer 2

Đây là cách bạn làm điều đó trong Sass:

.some-element 
    $main-color: black 
    color: $main-color 

    .red > & 
    $main-color: red 
    color: $main-color 

Kết quả CSS:

.some-element { 
    color: black; 
} 
.red > .some-element { 
    color: red; 
} 

Nhưng có vẻ như bạn đang cố gắng áp dụng một giải pháp xấu. Vui lòng mô tả những gì bạn đang cố gắng đạt được hơn là cách triển khai giải pháp cho một tác vụ không xác định. Xem XY problem.

UPD

Tôi nghĩ những gì tôi đã cố gắng để đạt được là khá rõ ràng ... nhưng giải thích thêm, tôi muốn 2 phối màu cho một trang. Một trong số đó là mặc định & chỉ khi lớp ".red" xuất hiện trên thẻ body. Những gì bạn đang trình bày trông giống như tôi sẽ phải thiết lập các biến cho mỗi lớp và sau đó lặp lại cho lớp .red. Tôi đã tìm kiếm, về cơ bản, có 1 biến (trong trường hợp này $ chính màu) được thiết lập cho mặc định và sau đó thiết lập lại bên trong lớp .red. Có lý?

Trong SASS, không có cách nào để đặt biến dựa trên việc mã hiện tại có được bao bọc trong lớp hay không. Bạn chỉ có thể khai báo biến theo cách thủ công.

Bạn cũng nên hiểu rằng những gì SASS làm là tạo CSS, không có gì khác. Vì vậy, hãy bắt đầu từ CSS bạn muốn có. Tôi cho rằng đó là một cái gì đó như thế này:

header { 
    background-color: black; } 

#main { 
    background-color: black; } 

body.red header { 
    background-color: red; } 

body.red #main { 
    background-color: red; } 

Bạn nên đã cung cấp mã như vậy ở nơi đầu tiên và đó là một sự xấu hổ mà tôi phải chắc đoán mù.

Mã này có thể được hiển thị như thế này (với các chức năng tương tự):

header { 
    background-color: black; } 

    body.red header { 
    background-color: red; } 


#main { 
    background-color: black; } 

    body.red #main { 
    background-color: red; } 

Bây giờ chúng ta có thể thấy một mẫu.

Mã này có thể dễ dàng tạo ra với Sass sử dụng một mixin:

=main-color() 
    background-color: black 

    body.red & 
    background-color: red 

Sau đó, bạn áp dụng nó như thế này:

header 
    +main-color 

#main 
    +main-color 

Một lựa chọn khác là tạo ra một mixin có chứa tất cả các phong cách. Đây có lẽ là một giải pháp tối ưu vì nó chứa ít sự trùng lặp nhất.

=theme-styles($main-color: black) 
    header 
    background-color: $main-color 

    #main 
    background-color: $main-color 

Sau đó, bạn áp dụng nó như thế này:

+theme-styles 

body.red 
    +theme-styles(red) 

Trong thực tế, bạn có thể tạo nhiều chủ đề:

+theme-styles 

@each $color in red blue green 
    body.#{$color} 
    +theme-styles($color) 

Demo: http://sassbin.com/gist/5812941/

Answer 3

Bạn có thể sử dụng chức năng. Như thế này: How to dynamically change text color...

@function set-color($class) { 
 
    @if ($class == red) { 
 
    @return #f00; 
 
    } @else { 
 
    @return #000; 
 
    } 
 
} 
 
$main-color = set-color($parent-class);

Answer 4

Sass Variable Phạm vi

Sass hỗ trợ hai loại biến: biến cục bộ và biến toàn cục.

Theo mặc định, tất cả các biến được xác định bên ngoài bất kỳ bộ chọn nào đều được coi là biến toàn cầu. Điều đó có nghĩa là chúng có thể được truy cập từ bất kỳ đâu trong bảng định kiểu của chúng tôi. Ví dụ, đây là một biến toàn cầu :

$bg-color: green; 

Mặt khác, các biến địa phương là những người mà được khai báo bên trong một selector. Sau đó, chúng tôi sẽ xem xét cách chúng tôi có thể tùy chỉnh hành vi đó. Nhưng bây giờ, hãy xem ví dụ đầu tiên của chúng tôi.

Ở đây chúng tôi xác định một mixin và sau đó biến btn-bg-màu bên trong nó. Đây là một địa phương biến, và do đó chỉ hiển thị cho các mã bên mixin rằng:

@mixin button-style { 
    $btn-bg-color: lightblue; 
    color: $btn-bg-color; 
} 

Kết luận

bạn có thể sử dụng mã này để thực hiện nếu thay đổi chỉ trong biến của bạn

$left: left; 
    $right: right; 

@if $dir == rtl { 
    $left: right; 
    $right: left; 
} 
.pull-left{ 
    float:#{$left}; 
} 

bạn có thể đọc bài viết này Sass Variable Scope