I have this kind of list
$colors : (
(redG, #ff0000, #ffffff),
(blueG, #00ff00, #ff4544),
(greenG, #0000ff, #123456)
);
and I'd like to do something like
a {
background-color: $colors[redG, 1]
color: $colors[redG, 2]
}
Thanx
You could use nested maps along with a function like such:
$colors : (
redG : (
1 : #ff0000,
2 : #fff
),
blueG : (
1 : #00ff00,
2 : #ff4544
),
greenG : (
1 : #0000ff,
2 : #123456
)
);
#function color($color, $position: 1) {
#return map-get(map-get($colors, $color), $position)
}
a {
background-color: color(redG, 1);
color: color(redG, 2);
}
a {
background-color: color(blueG, 1);
color: color(blueG, 2);
}
a {
background-color: color(greenG, 1);
color: color(greenG, 2);
}
Which will return:
a {
background-color: #ff0000;
color: #fff;
}
a {
background-color: #00ff00;
color: #ff4544;
}
a {
background-color: #0000ff;
color: #123456;
}
Related
In the following situation, I would like to combine variables with the loop index (in SCSS):
Predefined variables
$item-width-1: 400px;
$item-height-1: 340px;
$item-spacing-1: 40px;
$item-width-2: 200px;
$item-height-2: 440px;
$item-spacing-2: 100px;
$item-width-3: 300px;
$item-height-3: 240px;
$item-spacing-3: 60px;
For loop:
#for $i from 2 through 3 {
&:nth-child(#{$i}) {
.image { width: $item-width-#{$i}; height: $item-height-#{$i}; bottom: $item-spacing-#{$i}; }
.content { transform: translate(calc(#{$item-width-#{$i}} + 40px), 0); bottom: $item-spacing-#{$i}; }
.line { height: 108px + $item-spacing-#{$i}; left: $item-width-#{$i} / 2; }
&.active { width: $item-width-#{$i} + ($content-width + 80px); }
}
}
But it shows the following error:
Any ideas on how I could fix this?
Thank you in advance!
Is there any efficient way to write this code with less.js:
I've got already 3 variables colors : #vert, #violet and #orange
li {
&:nth-child(1) {
background: #vert;
&:hover,
&.open {
>.dropdown-menu li {
background: #vert;
}
}
}
&:nth-child(2) {
background: #violet;
&:hover,
&.open {
>.dropdown-menu li {
background: #violet;
}
}
}
&:nth-child(3) {
background: #orange;
&:hover,
&.open {
>.dropdown-menu li {
background: #orange;
}
}
}
}
I thought of a mixin, but I'm not writing well: Any help please ?
.colored-menu(#number, #color) {
&:nth-child(#number) {
background: #color;
&:hover,
&.open {
>.dropdown-menu li {
background: #color;
}
}
}
}
and calling it like this:
.colored-menu(1,#vert);
.colored-menu(2,#violet);
.colored-menu(3,#orange);
You can use your approach with some edits:
// mixin
.colored-menu(#number; #color) { // the docs recommends semi-colons instead of commas
&:nth-child(#{number}) { // variable requires curly brackets for interpolation
background: #color;
&:hover,
&.open {
> .dropdown-menu li {
background: #color;
}
}
}
}
// ruleset
li {
.colored-menu(1; #vert);
.colored-menu(2; #violet);
.colored-menu(3; #orange);
}
Also, consider using the each list function:
// list
#colors: #vert, #violet, #orange;
// ruleset
li {
each(#colors, {
&:nth-child(#{index}) {
background: #value;
&:hover,
&.open {
> .dropdown-menu li {
background: #value;
}
}
}
});
}
The output from both approaches are the same (in this instance).
I have a for loop in SASS which loops through page classes to insert a colour break for each module. For example:
#for $i from 1 through 4 { // the loop
.m0#{$i} .module-title{
background-color: nth($m_col_lvl_01_list, $i);
}
//- end loop
}
Which compiles to:
.m01 .module-title{
background-color: green;
}
.m02 .module-title{
background-color: blue;
}
.m03 .module-title{
background-color: yellow;
}
.m04 .module-title{
background-color: orange;
}
In the task I have at the moment it includes .m00 Is there a way of including 00 in the loop?
I think you can still achieve what you want using 0 in the for loop.
$list: (green, blue, orange, red, yellow);
//loop from 0 to the length of the list which isn't hardcoded
#for $i from 0 to length($list) {
.m0#{$i} .module-title {
//simply add one to the loop index to get the correct list item
background-color: nth($list, $i + 1);
}
}
This compiles to the following CSS
.m00 .module-title {
background-color: green;
}
.m01 .module-title {
background-color: blue;
}
.m02 .module-title {
background-color: orange;
}
.m03 .module-title {
background-color: red;
}
.m04 .module-title {
background-color: yellow;
}
I'm trying to use Angularjs multi-select into my project.
The following html is my multi-select div.
<div
multi-select
input-model="marks"
output-model="filters.marks"
button-label="name"
item-label="name"
tick-property="ticked"
selection-mode="multiple"
helper-elements="all none filter"
on-item-click="fClick( data )"
default-label="Select marks"
max-labels="1"
max-height="250px"
>
</div>
I know that I can use $scope.marks=data in the controller.
But the problem is $scope.marks is a global variable which I couldn't change..
Is there any way to set the values in multi-select without using the input-model?
Well, doing some tests here, i could get something with multiselecting:
var languages = ["C#", "Java", "Ruby", "Go", "C++", "Pascal", "Assembly"]; //The items.
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.marks = {};
for (lang in languages) {
$scope.marks[lang] = {
name: languages[lang],
marked: false
};
}
$scope.marks[3].marked = true; //mark "Go" and "C++" by default.
$scope.marks[4].marked = true;
$scope.theMarkedOnes = function() {
outp = "";
for (m in $scope.marks) {
if ($scope.marks[m].marked)
outp += $scope.marks[m].name + ", ";
}
if (outp.length == 0) {
return "(none)";
} else {
return outp.substr(0, outp.length - 2);
}
}
$scope.setMark = function(markone) {
markone.marked = !markone.marked;
}
})
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
font-family: sans-serif;
font-size: 0.7em;
}
::-webkit-scrollbar {
width: 7px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
.multiselector {
background-color: #CCCCCC;
overflow-y: scroll;
width: 17em;
height: 13em;
border-radius: 0.7em;
}
.multiselector .item {
cursor: pointer;
padding: 0.2em 0.3em 0.2em 0.0em;
}
.itemtrue {
background-color: #9999AA;
}
.msshow {
background-color: #cccccc;
border-radius: 0.7em;
margin-top: 1em;
padding: 0.6em;
width: 17em;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="multiselector">
<div ng-repeat="mark in marks" class="item item{{mark.marked}}" ng-click="setMark(mark)">{{mark.name}}</div>
</div>
<div class="msshow"> <b>Selected:</b> {{theMarkedOnes()}}</div>
</div>
Set & Get selected values, name and text of Angularjs isteven-multi-select
<div isteven-multi-select
input-model="marks"
output-model="filters.marks"
button-label="name"
item-label="name"
tick-property="ticked"
selection-mode="multiple"
helper-elements="all none filter"
on-item-click="fClick( data )"
default-label="Select marks"
max-labels="1"
max-height="250px">
</div>
Add items
$scope.marks= [
{ name: 'Mark I', value: 'Mark i', text: 'This is Mark 1', ticked: true },
{ name: 'Mark II', value: 'Mark ii', text: 'This is Mark 2' },
{ name: 'Mark III', value: 'Mark iii', text: 'This is Mark 3' }
];
Get selected item (on change)
$scope.fClick = function (data) {
console.log(data.name);
console.log(data.value);
console.log(data.text);
return;
}
Select item (with code)
$scope.abc = function (data) {
console.log(data.element1, data.element2);
angular.forEach($scope.marks, function (item) {
if (item.value == data.element1) {
item.ticked = true;
}
else {
item.ticked = false;
}
});
}
Deselect item (clear)
$scope.ClearClick = function () {
$scope.Filter = { selectMarks: 'Mark i' };
$scope.marks.map(function (item) {
if ($scope.Filter.selectMarks == item.value)
item.ticked = true;
else
item.ticked = false;
});
}
The Issue
I'm currently in a pickle. I need to group selectors inside of a Sass loop. I've tried many different ways to go about doing this such as:
body {
$store: null;
#for $i from 1 through 10 {
$store: append($store, ".offset-by-#{$i}", comma);
}
// produces content: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
#each $j in $store {
$store: unquote($j);
}
// produces .offset-by-10
}
What I'm trying to accomplish using pure Sass (no Ruby) is the following:
.offset-by-1,
.offset-by-2,
.offset-by-3,
...
.offset-by-10 { foo: bar; }
If you are a Sass god then please give me an idea of what to do here. If this is an inherent limitation of the meta-language then let me know about that too!
Considerations
I can't use anything other than a mixin to accomplish this because functions are expected to be used on a property value. Mixins, on the other hand allow the production of entire blocks of code.
Keep it simple, soldier!
%foo {
foo: bar; }
#for $i from 1 through 10 {
.offset-by-#{$i} {
#extend %foo; }}
UPD You can also have individual styles with this approach:
%foo {
foo: bar; }
#for $i from 1 through 10 {
.offset-by-#{$i} {
#extend %foo;
margin-left: 50px * $i; }}
Which results in the following CSS:
.offset-by-1, .offset-by-2, .offset-by-3, .offset-by-4, .offset-by-5, .offset-by-6, .offset-by-7, .offset-by-8, .offset-by-9, .offset-by-10 {
foo: bar; }
.offset-by-1 {
margin-left: 50px; }
.offset-by-2 {
margin-left: 100px; }
.offset-by-3 {
margin-left: 150px; }
.offset-by-4 {
margin-left: 200px; }
.offset-by-5 {
margin-left: 250px; }
.offset-by-6 {
margin-left: 300px; }
.offset-by-7 {
margin-left: 350px; }
.offset-by-8 {
margin-left: 400px; }
.offset-by-9 {
margin-left: 450px; }
.offset-by-10 {
margin-left: 500px; }
Have you tried something like this:
#mixin createNumbered($num, $className){
#for $i from 1 through $num {
.#{$className}-#{$i} {
#content;
}
}
}
#include createNumbered(10, 'foo-bar'){
color: white;
}
Updated:
#mixin createNumbered($num, $className){
$foo : '';
#for $i from 1 through $num {
$foo : $foo + '.' + $className + '-' + $i + ', ';
}
#{$foo} {
#content;
}
}
#include createNumbered(10, 'foo-bar'){
color: white;
}
This is likely overkill for what you need, but I needed to be able to add :last-child onto the class list. I built this on Clark Pan's Answer:
#mixin group-classes($start, $stop, $step, $selector, $selector-suffix, $property, $value) {
$selector-list: '';
$i: $start;
#while $i <= $stop {
$comma: ', ';
#if $i == $stop {
$comma: '';
}
$selector-list: $selector-list + $selector + '-' + $i + $selector-suffix + $comma;
$i: $i + $step;
}
#{$selector-list} {
#{$property}: #{$value}
}
}
And then to use it:
#include group-classes(1, 3, 1, '.e > .g', ':last-child', 'margin', 0);
Result:
.e > .g-1:first-child,
.e > .g-2:first-child,
.e > .g-3:first-child {
margin:0!important;
}