I have been using SASS for a month, love it.
However, when I create a variable such as:
$darkgrey:rgb(82,81,83);
Then decide re-use the variables, say in a specific p tag? In the body:
body{
p.ahh-whatever{
color:$darkgrey;
}
}
However it always seems to come up as a HEX in all browsers. Is there a reason for this? Do I need to use RGBA with 1 Opacity...
Software Being Used:
I also use Foundation 3 inline with Compass-Style. In addition to CodeKit to compile my code, and Sublime Text 2 for my editor. Operating System is OSX 10.8 (New IMac 27").
Any help would be great!
SASS will output hex whenever possible, because almost all browsers will understand it.
(Not all browsers will "get" RGB values or RGBA values.)
if you do specify a an rgba value, SASS will output it as such
for instance :
rgba(blue, 0.2)
will output :
rgba(0, 0, 255, 0.2)
see : Sass RGBA instances documentation
Related
Do you know any possibility to combine a heaxadecimal css variable with an alpha value to create a simple "shine through effect"?
e.g. as css variable:
--my-color-red: #ff0000;
Now we want in our scss implementation to add this alpha value as a background and following code snippet doesn't work:
background: rgba(var(--my-color-red), 0.5);
Without a css variable it works:
background: rgba(#ff0000, 0.5);
I think maybe the problem is that sass do the rgba implementation at compile time and the css variable is added at runtime afterwards.
Do you know any solution to solve this problem?
You could use a Sass function which converts hexadecimal to RGB:
#function hexToRGB($hex) {
#return red($hex), green($hex), blue($hex);
}
Then store another version of your CSS variable as RGB:
--my-color-red: #ff0000;
--my-color-red-rgb: #{hexToRGB(#ff0000)};
This will give you the RGB values which you can then tack the alpha value onto within the rgba function:
rgba(var(--my-color-red-rgb), 0.5)
Taken from this article.
I am trying to learn media query in css and I have few questions about some of the examples that I have come across. The queries are mentioned below:
I have seen a variable was declared in the following format in a .scss file which is used in a react component:
$screen-xs-max: ($screen-sm-min - 1);
Why is -1 used here?
The second question that I have is about this:
$large-screens-up: "(min-width: #{$screen-lg-min})";
I have 2 questions about these lines of code:
Why is the variable declared within the " ", doesn't that make the variable a string?
Why is # used here? I guess it is to find the variable $screen-lg-min in the path from where it is imported, but I am not sure if its correct. I just want to confirm if that's the correct thing or correct me if I am wrong.
Can anyone please help me with these doubts? I am sorry if this is too simple. I tried getting the answers myself, but couldn't find it.
In SCSS
Consider $screen-sm-min:546px; which will be declared in scss variables file in your project or the node modules folder.
$screen-xs-max: ($screen-sm-min - 1); means that the value of $screen-xs-max will be 1 less than $screen-sm-min that is 545px.
$large-screens-up: "(min-width: #{$screen-lg-min})";
Varible in scss can be used directly using $varible-name ,
But when you want to use the same variable inside a string in scss u will have to follow this
#{$variable-name} method
Why -1
Consider extra small devices width to be 0 to 545px(maxvalue).
Consider small devices width to be 546px(minvalue) to 768px(maxvalue)
Therefore the max width of the extra small devices will be
(min value of small devices) - 1
This method is used to avoid harcoded values in scss file,
For example if you decide to change the values of the width, you can change it in only one place and let the formulae handle the remaining calculation of the widths
OK, so I'm using this little fancy cutting edge technology called zsh-syntax-highlighting and although I'm overall happy with the result I don't know how to set styles to anything but 8 basic colors (black, red, green, yellow, blue, magenta, cyan, white), e.g.
#works
ZSH_HIGHLIGHT_STYLES[path]='fg=red'
ZSH_HIGHLIGHT_STYLES[path]='fg=1'
#doesn't work
ZSH_HIGHLIGHT_STYLES[path]='fg=31m'
ZSH_HIGHLIGHT_STYLES[path]='fg=\e[31m'
ZSH_HIGHLIGHT_STYLES[path]='fg=%{\e[31m%}'
ZSH_HIGHLIGHT_STYLES[path]='31m'
ZSH_HIGHLIGHT_STYLES[path]='\e[31m'
ZSH_HIGHLIGHT_STYLES[path]='%{\e[31m%}'
ZSH_HIGHLIGHT_STYLES[path]='%{\e[1;38;5;118m%}'
So, how do I set more fancy colors for this zshzle plugin?
As you pointed out in the comment to chepner answer terminator is a fork of gnome-terminal and it still uses a lot of functions from gnome. In fact it seems that the whole terminator VTE widget comes from gnome and gnome-terminal by defaults "supports" only 8 basic colors. You can check that with echotc Co command. It will return 8 for both of them and for xterm too (although in xterm case this is true and only 8 colors), so basically all 3 terminal emulators you tried so far.
Now, you noted that teminator (and gnome-terminal) can in fact display more colors, but this is only because it more or less processes all those special color codes without paying attention to TERM settings what does not obey standards but well, this is gnome. Anyway to make long story short you need to set TERM environment variable to something like xterm-256color and check again with echotc Co - you should now see 256, and your ZSH_HIGHLIGHT_STYLES[path]='fg=217' should work as well.
To always start with 256 colors you can put into you .zshrc
[[ "$TERM" == "xterm" ]] && export TERM=xterm-256color
and if you have any gnome shortcuts with terminator then change them as follows
terminator -e "TERM=xterm-256color pine"
http://zsh.sourceforge.net/Doc/Release/Zsh-Line-Editor.html#Character-Highlighting suggests that the value for fg be a single integer from 0 to 255:
ZSH_HIGHLIGHT_STYLES[path]='fg=167' # Whatever color 167 is in the 256-color palette.
I Notice you are using [path], it could be that a custom path with it's own color setting is interfering with your highlight setting. Try testing with a different item such as [command]:
ZSH_HIGHLIGHT_STYLES[command]='fg=222'
I tried the above line and it works for me. I tried using the same value for path already knowing my custom prompt has its own colors and my prompts custom colors won out over the highlight.
I use a ZSH helper called Oh-My-ZSH so the following may be a bit different or not apply to you:
Make sure you are changing the color definition after the highlight plugin is loaded. On my setup it will actually generate an error but since I only tested on my syetem (OSX10,9, ZSH 5.0.7, Oh-My-ZSH, iTerm v2) your experience may be different.
Doesn't work:
ZSH_HIGHLIGHT_STYLES[command]='fg=222'
...
plugins=(git osx jim colorize zsh-syntax-highlighting)
Does work:
plugins=(git osx jim colorize zsh-syntax-highlighting)
...
ZSH_HIGHLIGHT_STYLES[command]='fg=222'
My less file piggy-backs on to the end of the Twitter Bootstrap files (so things like #white are defined already. Here is my less code:
#columnSortScreen: #99f;
// the color used
#columnSort: mix( #white, #columnSortScreen );
When compiled, I get the following error (everything underlined by carets is highlighted):
non_object_property_loadError: error evaluating function `mix`: Cannot read property 'value' of undefined in /Users/cmv/Sites/...../tablesorter.less:12:14
11 // the color used
12 #columnSort: mix( #white, #columnSortScreen );
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
What am I doing wrong? Lessc is version 1.3.0.
Thanks!
I had the exact same error.
Did some digging and found this:
The docs for mix are missing the third parameter.
Try:
#fallback-color: mix(#from-color, #to-color, 50%);
Note the third parameter. This solved it in my case, does this fix it for you?
I have been searching in Google etc., but I couldnt find what I was looking for (I hope I didnt overlook something).. So I thought my best bet is to ask you guys :)
I am playing around with LESS-JS for the first time and I really like it. However I have a little problem now.
I am using the #arguments variable like this:
.basicBorder(#width:1px, #type:solid, #color:#black){
border:#arguments;
}
Which works as expected. Now when I want the border to be red, I am adding this to the element in my css:
.basicBorder(1px, solid, #red);
Which also works as expected. However I would like to avoid writing 1px, solid,, since these are my default values already, but when I try this:
.basicBorder(#red);
Or this:
.basicBorder(,,#red);
It doesnt work.
So I was wondering if any1 knows how I could "skip" the first 2 variables so that I can just input the color in case I dont want the border-width and type to be changed.
I hope you get what I am trying to say!
Regards!
You actually can name later parameters and skip the first ones. The syntax for your question is:
.basicBorder(#color:#red);
You can also use normal ordered arguments at the beginning and pluck out named arguments from the rest of the parameters:
.basicBorder(2px, #color:#red);
This sets #width to 2px, #type to the default, and #color to #red. Really nice if you have more seldom used arguments.
The parametric mixins in LESS works sorta like javascript functions, you can't skip the first parameters. So if you want to only change the color, you could rewrite the mixin like this:
.basicBorder(#color:#black, #width:1px, #type:solid){
border:#width #type #color;
}
Then you'd be able to call it like this:
.basicBorder(#red);
.basicBorder(#red, 2px, dotted);
edit
Using your original mixin, you could also create these
.basicBorderType(#type) {
.basicBorder(1px, #type, #black);
}
.basicBorderColor(#color) {
.basicBorder(1px, solid, #color);
}
Now you could overwrite any of the styles:
.basicBorderType(dotted); //1px dotted black;
.basicBorderColor(#red); //1px solid red;
.basicBorder(2px); //2px solid black;
A bit of a hack, but it's the only thing I can think of to help you out...