Tính phần trăm với SCSS / SASS

121

Tôi muốn đặt độ rộng theo phần trăm trong scss thông qua tính toán, nhưng nó gây ra lỗi cho tôi ..

CSS không hợp lệ sau "...- width: (4/12)%": biểu thức mong đợi (ví dụ: 1px, bold), là ";"

Tôi muốn làm một cái gì đó như

$my_width: (4/12)%;

div{
width: $my_width;
}

làm cách nào để thêm dấu% vào đó?

Câu hỏi tương tự với px và em

css sass

— Nick Ginanto
nguồn

Không có gì phải loay hoay. Tôi chỉ muốn thêm đơn vị của số vào phép tính. Tương tự như (400/20) px. Làm cách nào để có số và px / em /% trong scss? Bằng cách đó tôi có thể có "biến toàn cục" Tôi có thể thay đổi một lần

— Nick Ginanto

Cố gắng thêm một dấu ngoặc nhọn như $ my_width: ((4/12)%);

— Sri

Rất tiếc .. Xin lỗi, tôi không có cơ hội kiểm tra nó và hãy thử thêm một lần nữa để thực hiện việc này .. {$ my_width: (4/12)%;}

— Sri

Câu trả lời:

211

Bạn đã thử hàm phần trăm chưa?

$my_width: percentage(4/12);
div{
width: $my_width;
}

— Tomas
nguồn

có một chức năng tương tự cho px và em?

— Nick Ginanto

Không chắc chắn, nhưng trong phần nguồn của tài liệu, bạn có thể thấy logic cơ bản: Sass :: Script :: Number.new (value.value * 100, ['%']), vì vậy tôi sẽ nghĩ rằng nếu chúng không tồn tại, bạn có thể làm điều này trực tiếp hoặc tự tạo một số hàm trình bao bọc.

— Tomas

@NickGinanto cho px, bạn chỉ có thể thêm +pxvào cuối dòng, ví dụwidth: ($foo + $bar) +px

— DisgruntledGoat

@DisgruntledGoat Không, bạn không bao giờ nên làm điều đó trong bất kỳ trường hợp nào. Việc thêm đơn vị nên được thực hiện thông qua phép nhân (ví dụ. $foo + $bar * 1px), Việc nối đơn vị với như vậy chỉ mang lại cho bạn một chuỗi.

— cimmanon

@cimmanon có thay đổi đó gần đây không? Tôi chắc chắn rằng đó không phải là trường hợp khi tôi đăng bình luận của mình.

— DisgruntledGoat

Cách khác:

$my_width: 4/12*100%;

div{
width: $my_width; // 33.33333%
}

Sass sẽ xuất giá trị theo%.

— rlejnieks
nguồn

Lưu ý rằng tôi phải sử dụng 100/6 * 1% để làm cho điều này hoạt động cho tôi, nếu không, tôi đã kết thúc với 1666,67%.

— sp00n

Tôi có thể tìm tài liệu ở đâu * 100% thực sự làm gì?

— Ini

Tôi đã có thể làm cho nó hoạt động theo cách này:

div{
   width: (4/12)* 1%;
   }

Bằng cách này, bạn không cần sử dụng bất kỳ chức năng đặc biệt nào.

— Enrique Cuchetti
nguồn