Το Less.js επεκτείνει το CSS με δυναμικές δυνατότητες όπως μεταβλητές, mixins, μαθηματικές πράξεις και ενσωματωμένες συναρτήσεις.
Ενσωματωμένες συναρτήσεις
Πράξεις μονάδων μέτρησης & μορφοποίηση
unit(30px / 5px) // => 6
unit(5, px) // => 5px
e("ms:stuff()") // => ms:stuff()
%("count: %d", 1+2) // => "count: 3"
Συναρτήσεις ελέγχου τύπων
iscolor(@x) // Returns true if value is a color
isstring(@x) // Returns true if value is a string
isnumber(@x) // Returns true if value is a number
iskeyword(@x) // Returns true if value is a keyword
isurl(url(...)) // Returns true if value is a url
ispixel(@x) // Returns true if unit is px
isem(@x) // Returns true if unit is em
ispercentage(@x) // Returns true if unit is %
isunit(@x, rem) // Returns true if value matches specified unit
Λειτουργίες καναλιών χρώματος
hue(@color) // Returns the hue channel (0-360)
saturation(@color) // Returns the saturation percentage
lightness(@color) // Returns the lightness percentage
luma(@color) // Returns perceptual luma
luminance(@color) // Returns relative luminance
Ανάμειξη και προσαρμογή χρωμάτων
fade(@color, 50%) // Set opacity to 50%
fadein(@color, 10%) // Increase opacity by 10%
fadeout(@color, 10%) // Decrease opacity by 10%
spin(@color, 30) // Rotate hue angle by 30 degrees
mix(@color1, @color2, 50%) // Blend two colors evenly
Συνθήκες Mixin Guards
Το Less χρησιμοποιεί τη λέξη-κλειδί when για την εφαρμογή λογικών συνθηκών στα mixins:
// Έλεγχος φωτεινότητας
.theme-box when (luma(@color) > 50%) {
color: #000;
background-color: @color;
}
// Έλεγχος άρνησης
.theme-box when (not (luma(@color) > 50%)) {
color: #fff;
background-color: @color;
}
// Προεπιλεγμένη εφεδρική συνθήκη
.theme-box when (default()) {
border: 1px solid #ccc;
}
// Έλεγχος ισότητας
.shape when (e(@shape) = 'circle') {
border-radius: 50%;
}