At the moment I tried to build mixins for less, but it seems to be more complicated than expected. For example, I tried to build an if condition and my header looks like this:
.ifClauses(
#checkParam,
#conditions:{
isnumber(#checkParam),
ispercentage(#checkParam),
ispixel(#checkParam)
},
#thens:{
.first(){height:#checkParam * 1px;},
.second(){height:#checkParam;},
.third(){height:#checkParam;}
}
)
I know that the arrays were defined like:
#array: first,second,third;
.
Maybe I could use this as an object so to say, how can I write the array to the mixins params when the params were divided by commas?
I solved it this way:
.height(#param: #_tablet_slider_-height){
#active : false;
& when(isnumber(#param)){
height: #param * 1px;
#active: true;
}
& when(isunit(#param)){
height: #param;
#active: true;
}
& when(ispixel(#param)){
height: #param;
#active: true;
}
& when(isem(#param)){
height: #param;
#active: true;
}
& when(ispercentage(#param)){
height: #param;
#active: true;
}
& when(#active = false){
&:before{
content:"Error in parsing less"
}
}
}
Related
I'm writing some sass to generate a set of icons based on a series of parameters. I have a function that analyses a set of variables and then returns a 'scenario' variable which in turn is used to filter the information taken from the nested map where everything is stored.
The code which retreives the information from the nested map is as follows:
#each $key-lv0, $lv0 in $icon-config {
#if($key-lv0 == $scenario) {
.icon{
#each $key-lv1, $lv1 in $lv0 {
#if type-of($lv1) != "map" {
#{$key-lv1}: $lv1;
}
#each $key-lv2, $lv2 in $lv1 {
#if type-of($lv2) != "map" {
.#{$key-lv1} {
#{$key-lv2}: $lv2;
}
}
#each $key-lv3, $lv3 in $lv2 {
#if($key-lv2 == "hover") {
.#{$key-lv1}:#{$key-lv2} {
#{$key-lv3}: $lv3;
}
} #else {
.#{$key-lv1} #{$key-lv2} {
#{$key-lv3}: $lv3;
}
}
}
}
}
}
}
}
... and this produces something along these lines:
.icon .icon-header {
background-color: #00a9f0;
}
.icon .icon-header:hover {
border-color: #040100;
}
... etc ...
... which is fine - repeated statements aside whicvh I'll deal with later.
The problem is the cap between ".icon" and ".icon-header". These classes will all be used in a single element and for the css to be interpretted correctly it needs to generate something like this:
.icon.icon-header {
background-color: #00a9f0;
}
.icon.icon-header:hover {
border-color: #040100;
}
I've tried bringing ".icon" down like so:
#if type-of($lv1) != "map" {
.icon#{$key-lv1}: $lv1;
}
and removing it from the top but sass rejects this with the following error:
Error: Properties are only allowed within rules, directives, mixin includes, or other properties.
It seems such a minor thing but it's nagging me and I can't seem to find an answer.
I'm trying to use an each loop in Sass but the css is compiling with the variable name instead of the content of the variable.
$green-1: #9ae200;
$green-2: #5ea600;
$color-list: green-1 green-2;
#each $single-color in $color-list {
&.#{$single-color} {
background-color: $single-color;
}
}
The output I am looking for is:
.green-1 {
background-color:#9ae200;
}
.green-2 {
background-color:#5ea600;
}
But the css is compiling as:
.green-1 {
background-color:green-1;
}
.green-2 {
background-color:green-2;
}
So to try to get the dollar sign in there I tried this:
#each $single-color in $color-list {
#function create-variable($variable){
#return "$" + $variable;
}
&.#{$single-color} {
background-color: create-variable($single-color);
}
}
But that compiled as:
.green-1 {
background-color:$green-1;
}
.green-2 {
background-color:$green-2;
}
Sass is not reading the variables for some reason and is taking them literally. Anyone know how to make this work?
You cannot create dynamic variable in sass. Instead you can achieve your desired result using map
example:
$green-1: #9ae200;
$green-2: #5ea600;
$color-map: (
green-1: $green-1,
green-2: $green-2,
);
.body{
#each $key,$value in $color-map {
&.#{$key} {
background-color: $value;
}
}
}
I've used guard expressions elsewhere in my CSS to achieve IF statements in LESS, however these don't work for me when trying to declare variables like so...
#neutral: false;
#warm: true;
when (#neutral = true) {
#green: #91C95B;
#red: #F15647;
etc...
}
when (#warm = true) {
#green: #91AD3C;
#red: #BF2A23;
etc...
}
This is an example of how I would like to be able to use that variable
h1 {
color:#green;
}
This is how I would expect it to compile down to CSS
h1 {
color: #91AD3C;
}
Is this possible with LESS or would I need to modify my code to use mixin guards?
You can use Guarded Mixins like this :
#neutral: false;
#warm: true;
.color() when (#neutral) {
#green: #91C95B;
}
.color() when (#warm) {
#green: #91AD3C;
}
.color();
h1 {
color:#green;
}
How do I get this $_GET['ago'] variable to increment by 1
public function __construct($future=false) {
$GLOBALS['twd_helper']=&$this;
}
public function query_string($add, $remove=null) {
$qs_data = array();
parse_str($_SERVER['QUERY_STRING'], $qs_data);
$qs_data = array_merge($qs_data, $add);
if ($remove) {
foreach($remove as $key) {
if (isset($qs_data[$key])) {
unset($qs_data[$key]);
}
}
}
return http_build_query($qs_data);
}
public function filter_overnight () {
if (isset($_GET['tod']) && $_GET['tod'] == 'overnight') {
$overnight = $_GET['overnight'];
}
if (($_GET['ago'])) {
$_GET['ago'] ? $_GET['ago']++ : $_GET['ago'] = 0;
}
}
I want to change my URL to increase by 1 each time its clicked
guide?ago=1
guide?ago=2
guide?ago=3
etc
In the html, just do this:
Link Text
Your filter_overnight function is a bit odd too - I think it could be made more readable:
if ($_GET['ago'])
{
$_GET['ago'] = (int)$_GET['ago'] + 1;
}
else
{
$_GET['ago'] = 0;
}
Or with the ternary:
$_GET['ago'] = ($_GET['ago']) ? (int)$_GET['ago'] + 1 : 0
Without seeing the whole code, I'm not sure why filter_overnight is incrementing $_GET['ago'], but at a glance it appears to put an undocumented side effect into the function by changing a global value (which would also render the increment in the <a> pointless). The superglobals in PHP can be dangerous things - I find it best to treat them as immutable and copy values out of them vs working on them directly.
Hi
Have use this code before. Find it useful on Web. But Dont know how to convert it for wp7. Will some1 take a shot at it?
script language="JavaScript"
len=0;
function CalcKey()
{
len=0;
var temp=document.Encrypt.Key.value;
for(i=0;i<temp.length;i++)
{
len=len+temp.charCodeAt(i);
}
if(len==0)
{
alert('Please Enter the appropriate Key');
document.Encrypt.Key.focus();
}
return len;
}
function Encryption()
{
CalcKey();
document.Encrypt.Encrypted.value="";
var txt=document.Encrypt.normal.value;
var net="";
var fin=0;
if(len>0)
{
if(txt.length>0)
{
for(i=0;i<txt.length;i++)
{
fin=txt.charCodeAt(i)+len;
if(fin>99)
{
net=net+fin;
}
else
{
net=net+'0'+fin;
}
}
document.Encrypt.Encrypted.value=net;
document.Encrypt.normal.value="";
}
else
{
alert('Please Enter the Text to be Encrypted');
document.Encrypt.normal.focus();
}
}
}
function Decryption()
{
var txt=document.Encrypt.Encrypted.value;
var j=3;
var temp1;
var res="";
CalcKey();
if(len>0)
{
if(txt.length>0)
{
for(i=0;i<txt.length;i+=3)
{
var temp=txt.substring(i,j);
temp1=(parseInt(temp)-len);
var t=unescape('%'+temp1.toString(16));
if(t=='%d' || t=='%a')
{
res=res+' ';
}
else
{
res=res+t
}
j+=3;
}
document.Encrypt.normal.value=res;
document.Encrypt.Encrypted.value="";
}
else
{
alert('Please Enter the Encrypted Text');
document.Encrypt.Encrypted.focus();
}
}
}
It looks like this code simply escapes/unescapes text from a form like "HelloWorld" to some kind of integer shifted by its current position.
You can definitely port this algorithm across to C# - you'll need to use
some kind of ((int)c).ToString() in order to write
Char.ParseInt to read bits of the string back in
Alternatively there are existing encryption methods you can use - http://robtiffany.com/windows-phone-7/dont-forget-to-encrypt-your-windows-phone-7-data
It seems that all you need is a simple cipher or form of symmetric encryption.
Have a look at the AesManaged encryption algorithm.