I'm trying to set the shorthand font value (related question), but the variable I'm using for line-height is behaving weirdly; as if the variable is re-interpreted each time.
This is in LESS version 1.4.2
.info {
#infoHeight: 22px;
#infoTopPadding: 2px;
#infoLineHeight: #infoHeight - #infoTopPadding;
margin: #infoLineHeight;
font: bold 13px~'/'#infoLineHeight Arial, sans-serif;
}
Results in:
.info {
margin: 20px;
font: bold 13px / 22px - 2px Arial, sans-serif;
}
So the same variable results in two different values depending on context. Is this intended behavior or could this be a bug?
in Less >= 1.4.0 you need to use math operations in brackets by default (thats's by design, but can be changed in the Less settings). Your code would work perfectly fine in older versions of Less.
So if you write in Less:
.info {
#infoHeight: 22px;
#infoTopPadding: 2px;
#infoLineHeight: (#infoHeight - #infoTopPadding);
margin: #infoLineHeight;
font: bold 13px~'/'#infoLineHeight Arial, sans-serif;
}
the CSS output becomes:
.info {
margin: 20px;
font: bold 13px / 20px Arial, sans-serif;
}
I hope this is your desired/expected outcome.
Related
I just inherited an application and the less variable file is setup as follows.
#icon-font-path: "../fonts/";
#exampleFont: exampleFont, 'Helvetica Neue', Helvetica, Arial, sans- serif;
#font-face {
font-family: exampleFont;
src: url('#{icon-font-path}#{exampleFont}.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
compiled CSS
#font-face {
font-family: exampleFont;
src: url('../fonts/exampleFont, 'Helvetica Neue', Helvetica, Arial, sans-serif.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Does anyone know why the src url contains the url AND font family and when it is compiled it combines both and still works? I've never seen it done this way before.
src should be
src: url('#{icon-font-path}exampleFont.ttf') format('truetype');
In the current code it has #{exampleFont} which would expand to the value of the variable.
Here a working example on how to use a mixin for Fonts in LESS:
https://github.com/MarcoHengstenberg/helpCSS/blob/master/help.css#L528-L547
On line 533 you have to replace weight and style with actual values for your regular font (400, normal).
What is the keyboard-shortcut in sublime text3 (on ubuntu) change css from inline to branched ( I don't know what it called exactly ) and back
inline
body { background-color: #112D2A; font-size: 12px; margin: 0; padding: 0; font-family: Verdana, Geneva, sans-serif; }
I want to change above inline way css into branched way css
branched
body {
background-color: #112D2A;
font-size: 12px;
margin: 0;
padding: 0;
font-family: Verdana, Geneva, sans-serif;
}
what I have tried
Ctrl+Shift+M select the content within {
Ctrl+Shift+Space select the content within { block by block
Ctrl+Shift+J doesnt' work
and if it does'n exist then how do we add in key binding, what will be argument?
I used Sublime 3 only once to look for new features and as far as I know there'S no builtin one-click feature.
Beside writing your own plugin you might do this how I would do this by using the builtin multi-select/multi-caret feature:
Oneline to multiline
Line:
body { background-color: #112D2A; font-size: 12px; margin: 0; padding: 0; font-family: Verdana, Geneva, sans-serif; }
Select the first semicolon (; means it's selected):
body { background-color: #112D2A; font-size: 12px; margin: 0; padding: 0; font-family: Verdana, Geneva, sans-serif; }
Press Ctrl + D until you've selected all ;:
body { background-color: #112D2A; font-size: 12px; margin: 0; padding: 0; font-family: Verdana, Geneva, sans-serif; }
Enter ; to get rid of the selections and to collapse the selection into multiple cursors after the semicolons (the | indicates the cursor):
body { background-color: #112D2A;| font-size: 12px;| margin: 0;| padding: 0;| font-family: Verdana, Geneva, sans-serif;| }
Press RETURN to insert newlines:
body { background-color: #112D2A;
| font-size: 12px;
| margin: 0;
| padding: 0;
| font-family: Verdana, Geneva, sans-serif;
| }
Press ESC to leave the multi select/caret mode
Correct the break after the first curly brace.
Et voila.
After step 3. you might add another caret after the first curly brace by holding Ctrl and clicking at that place to skip step 6.
Multiline to oneline
Lines:
body {
background-color: #112D2A;
font-size: 12px;
margin: 0;
padding: 0;
font-family: Verdana, Geneva, sans-serif;
}
Add extra tab / space befor closing curly brace (see step 4)
body {
background-color: #112D2A;
font-size: 12px;
margin: 0;
padding: 0;
font-family: Verdana, Geneva, sans-serif;
}
Place the cursor in the first column of the second line and press Shift + Alt + Down till the last line:
body {
| background-color: #112D2A;
| font-size: 12px;
| margin: 0;
| padding: 0;
| font-family: Verdana, Geneva, sans-serif;
|}
Press Backspace
body { background-color: #112D2A;| font-size: 12px;| margin: 0;| padding: 0;| font-family: Verdana, Geneva, sans-serif;| }
Press DEL to delete the superflous space chars / tabs
Press ESC to cancle the selection
Et voila.
I am trying to disable my anchor tags from being underlined when hovered over. I have added text decoration: none; to my .scss file like so:
$font-family-serif: 'Nixie One';
$font-family-base: $font-family-serif;
#import "bootstrap";
//#import "bootstrap-sprockets";
//TB Navbar overrides to change the color scheme
$bgDefault : #ffffff;
$bgHighlight : #ffffff;
$colDefault : #8587f1;
$colHighlight : #4e5aff;
.navbar-default {
font-weight: bold;
font-size: 25px;
background-color: $bgDefault;
border-color: $bgHighlight;
text-decoration: none;
Also when I look at the web page, it seems to compute the rule correctly:
Where am I going wrong here?
.navbar-default {
font-weight: bold;
font-size: 25px;
background-color: $bgDefault;
border-color: $bgHighlight;
text-decoration: none;
a
{
text-decoration: none;
&:hover{
text-decoration: none;
}
}
So apparently the issue was that I just had to specify the the a tag: a {text-decoration: none;} within my scss file instead of just setting it for the class.
When using LESS, i found usefull to mix classes, in order to create a new class based on other class properties, but sometimes i need to override them.
like:
.btn {
border-radius: 10px;
background-color: blue;
font-size:10px;
}
.btn_warning {
.btn;
background-color: yellow;
font-size: 12px;
}
The output has duplicated properties:
.btn {
border-radius: 10px;
background-color: blue;
font-size:10px;
}
.btn_warning {
border-radius: 10px;
background-color: blue;
font-size:10px;
background-color: yellow;
font-size: 12px;
}
I know there are multiple aproaches for this, like multiple classes on dom, or even #extend to build multiple selectors, but navigator still overriding at runtime the properties.
Is there any reason to duplicate same properties when mixin? Seems a simple way for making "independent" groups of properties, but not nice if has duplicated values.
LESS does not account for removal of duplicate properties within a block, at least in part because of this reason stated here (quote slightly modified for grammar fix):
The trouble is that people frequently use multiple properties in order
to provide a fallback for older browsers. Removing the properties is
not something that it would be good to do generically.
It is left up to the programmer to not program it for duplication. You can set up a basic mixin like what Danny Kijkov noted in his answer, or...
Solution #1 (Complex, but Powerful to Fully Define)
You can get elaborate in building a master button maker mixin. Something like this:
LESS (Mixin)
.makeBtn(#ext: null; #rad: 10px; #color: blue; #size: 10px;) {
.set-extension() when (#ext = null) {
#class-extension: ~'';
}
.set-extension() when not (#ext = null) {
#class-extension: ~'_#{ext}';
}
.set-extension();
.btn#{class-extension} {
border-radius: #rad;
background-color: #color;
font-size: #size;
//define various addtions based on extensions here
.specialExtensionProps() when (#ext = danger) {
border: 3px solid red;
}
.specialExtensionProps() when (#ext = someExtName) {
my-special-prop: yep;
}
.specialExtensionProps();
}
}
LESS (Use the Mixin Various Ways)
.makeBtn(); //makes base button
.makeBtn(warning; #color: yellow; #size: 12px); //makes modified button
.makeBtn(danger; #color: red;); //makes modified button
.makeBtn(someExtName, 15px); //makes modified button
CSS Output
.btn {
border-radius: 10px;
background-color: #0000ff;
font-size: 10px;
}
.btn_warning {
border-radius: 10px;
background-color: #ffff00;
font-size: 12px;
}
.btn_danger {
border-radius: 10px;
background-color: #ff0000;
font-size: 10px;
border: 3px solid red;
}
.btn_someExtName {
border-radius: 15px;
background-color: #0000ff;
font-size: 10px;
my-special-prop: yep;
}
In case you did not know, note the above demonstrated LESS functionality of setting only some variables from the set of mixin variables. So for the first two specialized .makeBtn() calls, I only set a few variables, out of order from the mixin, by explicitly calling the variable name to set (e.g. #color: yellow). This allows me to "skip" over setting the #size. In the last example, I was only setting the first two values, so I did not need to put any variable names.
I don't know if the above helps you get what you want, but it does offer a different way of being able to reduce code size.
Solution #2
You mentioned :extend(), which could be well used here to avoid duplication:
LESS
.btn {
border-radius: 10px;
background-color: blue;
font-size:10px;
}
.btn_warning {
&:extend(.btn);
background-color: yellow;
font-size: 12px;
}
CSS Output
.btn,
.btn_warning {
border-radius: 10px;
background-color: blue;
font-size: 10px;
}
.btn_warning {
background-color: yellow;
font-size: 12px;
}
Solution #3
In your case, if all the buttons will be of either class .btn or a .btn_SOMETHING form, and you are not using .btn_ for anything else but buttons, then you might be able to just use the CSS cascade to apply styles and prevent duplication of CSS code like so (no special LESS required):
LESS and CSS Output
.btn, [class *= btn_] {
border-radius: 10px;
background-color: blue;
font-size:10px;
}
.btn_warning {
background-color: yellow;
font-size: 12px;
}
Any html with the class btn_warning will first get the base button styles from the attribute selector [class *= btn_] while the actual btn_warning class will override the things set to be overridden.
Solution #4
If you split the class names in the html (so class="btn warning" rather than class="btn_warning"), then this works to avoid duplication:
LESS and CSS Output
.btn {
border-radius: 10px;
background-color: blue;
font-size:10px;
}
.btn.warning {
background-color: yellow;
font-size: 12px;
}
What about this solution?
.btn(#size: 10px, #color:blue) {
border-radius: 10px;
background-color: #color;
font-size:#size;
}
.btn_warning {
.btn(12px, yellow);
}
I have an <input /> with a placeholder. The input is custom-designed, i. e. it has no borders, no outline, a custom height, custom width, custom background color, custom text color, and a custom font with a specific font-size and line-height. That font is imported using #font-face referencing a *.ttf-file.
The problem is that when focussing on the input field, the placeholder text jumps about 2-3px higher, only to jump back on blur.
Here the definition of the input field:
#font-face{
font-family: SourceSansProExtraLight;
src: url('../fonts/Source_Sans_Pro/SourceSansPro-ExtraLight.ttf');
}
#search_input{
background-color: #f0f0f0;
outline: none;
border: none;
padding: 0;
margin: 0;
width: 236px;
padding-left: 12px;
width: 224px; /* width (236) - padding-left */
font-family: SourceSansProExtraLight;
font-size: 30px;
line-height: 30px;
color: #5e5e5e;
height: 52px;
}
Here's a GIF demonstrating the issue:
Please check that you have write any css for input:focus Selector that may cause the issue. if you don't write any css for input:focus, write css for that to fix the problem.
With input[type="text"] there is no Problem.
I have the Problem only with input[type="number"] if the height and line height is equal:
input[type="number"] {
height: 30px;
line-height: 30px;
}
but if I reduce the line height the effect disapears:
input[type="number"] {
height: 30px;
line-height: 28px;
}
Chrome reserve space for caret.
The height of the line must be greater than the height of the font at 1.11 units (on my system).
Example:
font-size = 30px
line-height = 30px * 1.11 = round(33,3px) = 33px
Try setting outline-offset: 0 when the input has :focus. That fixed the jumping placeholder bug for me on WebKit. I was also setting outline: none and showing a custom box-shadow, which may be the cause.