So che sei in grado di fare alcuni semplici calcoli in Sass/Scss. Ma c'è un modo per sottrarre i pixel dalle percentuali? Ad esempio:Sottrarre pixel da percentuale in SASS?
$image-size: 200px;
.bio {
width: 100% - $image-size;
}
Non vedo come funzionerebbe, infatti SASS non può conoscere magicamente la dimensione della casella.
Ora, se ottengo quello che stai cercando di fare, la soluzione migliore sarebbe quella di avvolgere la larghezza genitore di .box in una variabile e quindi sottrarre la larghezza dell'immagine a quella variabile - considerando una larghezza del 100% significa che otterrà il 100% di una certa larghezza.
È possibile utilizzare la funzione calc() per ottenere ciò che si desidera. È sperimentale ma è ancora pretty good supported dai diversi browser.
Con Sass, è possibile creare un calc mixin per ottenere questo lavoro su più versioni del browser con le -webkit e -moz prefissi (non c'è bisogno della Opera uno):
@mixin calc($key, $value) {
#{$key}: -webkit-calc(#{$value});
#{$key}: -moz-calc(#{$value});
#{$key}: calc(#{$value});
}
e chiamarlo con qualcosa come:
.bio {
@include calc("width", "100% - #{$image-size}");
}
'calc()' è la magia di cui mancava il sass. Questa risposta non è più corretta. –
@SethBattin Per dire che la risposta è "non è più corretto" non è del tutto vero: Sass * non può * sottrarre pixel da percentuali/em/rem/VH/VW/etc. 'calc()' è una funzionalità di CSS, non di Sass. – cimmanon
@cimmanon È una distinzione inutile da fare, per sottolineare che la sass non può fare nulla, quando l'obiettivo è implementare quella cosa in css. Usare sass è solo una complessità extra per lo styling, e la risposta di Aperçu si occupa di questa complessità. –