Repeat Dots in Less/Sass for Content Property

Repeat dots in LESS / SASS for Content property

I do a mixin in SASS, in LESS I think you can do something similar. Some characthers like points or dashes must be between quotation marks.

SASS

@mixin repeat($character, $n){
  $c:"";
  @for $i from 1 through $n {
    $c: $c + $character;
 }
   content: $c;
}

.dash{
  @include repeat("-", 4)
}

.dot{
  @include repeat(".", 6)
}

.letter{
  @include repeat(x, 2)
}

OUTPUT

.dash {
  content: "----";
}

.dot {
  content: "......";
}

.letter {
  content: "xx";
}

Or you can do also a function:

SASS

@function repeat($character, $n){
  $c:"";
  @for $i from 1 through $n {
    $c: $c + $character;
 }
    @return $c;
}

.dash{
  content: repeat("-", 4)
}

.dot{
  content: repeat(".", 6)
}

OUTPUT

.dash {
  content: "----";
}

.dot {
  content: "......";
}

---

---

In LESS there isn't for sentences and I can't found a clean way to do but this code works (the output is quite dirty):

LESS

.repeat(@char, @i) when (@i> 0) {
   .repeat(@char, (@i - 1)); 
  content+_:"@{char}";
}

.dash {
  .repeat("-" ,3);
}

.dot {
  .repeat("." ,5);
}

OUTPUT

.dash {
  content: "-" "-" "-";
}
.dot {
  content: "." "." "." "." ".";
}

Why is the scss repeat function not working?

here's a SASS function that does the job.

@function repeater($n, $character) {
    $c: "";

    @for $i from 1 through $n {
        $c: $c +" "+ $character;
    }

    @return unquote($c);
}

// now i can use it :D
border-color: rgb(170, 170, 170) repeater(3, black);

Looking for a SASS/SCSS/Less library for non-ASP .NET Core app

Looks like SharpScss is what I'm looking for. By adding

  <PropertyGroup>
    <RuntimeIdentifiers>win-x86;win-x64;linux-x64;osx-x64</RuntimeIdentifiers>
  </PropertyGroup>

to the project file, the SASS parsing runs in both Windows and Linux (haven't tested on OSX) without having to install or configure anything.

How to increase space between dotted border dots

This trick works for both horizontal and vertical borders:

/*Horizontal*/
background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;

/*Vertical*/
background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 3px;
background-repeat: repeat-y;

You can adjust the size with background-size and the proportion with the linear-gradient percentages. In this example I have a dotted line of 1px dots and 2px spacing.
This way you can have multiple dotted borders too using multiple backgrounds.

Try it in this JSFiddle or take a look at the code snippet example:

div {  padding: 10px 50px;}.dotted {  border-top: 1px #333 dotted;}.dotted-gradient {  background-image: linear-gradient(to right, #333 40%, rgba(255, 255, 255, 0) 20%);  background-position: top;  background-size: 3px 1px;  background-repeat: repeat-x;}.dotted-spaced {  background-image: linear-gradient(to right, #333 10%, rgba(255, 255, 255, 0) 0%);  background-position: top;  background-size: 10px 1px;  background-repeat: repeat-x;}.left {  float: left;  padding: 40px 10px;  background-color: #F0F0DA;}.left.dotted {  border-left: 1px #333 dotted;  border-top: none;}.left.dotted-gradient {  background-image: linear-gradient(to bottom, #333 40%, rgba(255, 255, 255, 0) 20%);  background-position: left;  background-size: 1px 3px;  background-repeat: repeat-y;}.left.dotted-spaced {  background-image: linear-gradient(to bottom, #333 10%, rgba(255, 255, 255, 0) 0%);  background-position: left;  background-size: 1px 10px;  background-repeat: repeat-y;}

<div>no  <br>border</div><div class='dotted'>dotted  <br>border</div><div class='dotted-gradient'>dotted  <br>with gradient</div><div class='dotted-spaced'>dotted  <br>spaced</div>
<div class='left'>no  <br>border</div><div class='dotted left'>dotted  <br>border</div><div class='dotted-gradient left'>dotted  <br>with gradient</div><div class='dotted-spaced left'>dotted  <br>spaced</div>

Is it possible to use Icons with css:before without hardcoding the code?

You can try to group all the content value in a map variable

I adapted for you an example

SCSS

// Map variable
$icons: (
  facebook   : "\f0c4",
  twitter    : "\f0c5",
  googleplus : "\f0c6",
  youtube    : "\f0c7"
);

// Mixin doing the magic
@mixin icons-list($map) {
  @each $icon-name, $icon in $map {
    @if not map-has-key($map, $icon-name) {
      @warn "'#{$icon-name}' is not a valid icon name";
    }

    @else {
      &--#{$icon-name}::before {
        content: $icon;
      }
    } 
  }
}

// How to use it
.social-link {
    background-color: grey;
    @include icons-list($icons);
}

CSS

// CSS Output
.social-link {
  background-color: grey;
}
.social-link--facebook::before {
  content: "Ä";
}
.social-link--twitter::before {
  content: "Å";
}
.social-link--googleplus::before {
  content: "Æ";
}
.social-link--youtube::before {
  content: "Ç";
}

---

So you only have to maintain that $icons variable in case some values change. hope you get the idea.

Can one do the equivalent of nesting the CSS dot operator?

You can do that only with a preprocessor like sass

In pure css you can not nest elements

Multiple transitions with scss

In your mixin, you have declared a single variable $x as a parameter which means that sass expects the mixin to be called with one argument.

@include transition(visibility 0s ease 0.2s)

When you pass the mixin comma separated values, it causes an error because sass sees these as multiple values instead of a single value which it expects.

@include transition(visibility 0s ease 0.2s, opacity 0.2s ease) //Sees two args instead of one arg

In Sass, comma separated values can be interpreted as a single value if declared as varargs. Varargs are mixin or function parameters declared with 3 dots appended to their name.

Replacing your $x parameter with $x... will ensure that sass interprets the comma separated arguments passed to your mixin as one value.

@mixin transition($x...){
  -webkit-transition: $x;
  -moz-transition: $x;
  -ms-transition: $x;
  -o-transition: $x;
  transition: $x;
}

It can then be used like this

div {
  @include transition(color 1s, background-color 1s, border-color 1s);
}

which compiles to

div {
  -webkit-transition: color 1s, background-color 1s, border-color 1s;
  -moz-transition: color 1s, background-color 1s, border-color 1s;
  -ms-transition: color 1s, background-color 1s, border-color 1s;
  -o-transition: color 1s, background-color 1s, border-color 1s;
  transition: color 1s, background-color 1s, border-color 1s;
}

By doing this you can pass the values as you normally would in CSS without the hack you are currently using making it much cleaner.

Hope this helps

With CSS, use ... for overflowed block of multi-lines

There are also several jquery plugins that deal with this issue, but many do not handle multiple lines of text. Following works:

• http://pvdspek.github.com/jquery.autoellipsis/
• http://dotdotdot.frebsite.nl/
• http://keith-wood.name/more.html
• http://github.com/tbasse/jquery-truncate

There also some preformance tests.

Offset every nth row inside a responsive layout

One way you can offset every odd row with CSS only and without media queries is to use the shape-outside property.

Please note that this property is candidate recomendation and therefore has low browser support.

Here is an example that supports up to 5 rows :

.wrapper {  width: 100%;}.wrapper div {  width: 50px;  height: 50px;  margin: 50px;  border-radius: 50%;  display: inline-block;  background-color: #000;  text-align: center;}.wrapper:before {  content: '';  float: left;  width: 75px;  height: 9999px;  -webkit-shape-outside: polygon(0px 150px, 75px 150px, 75px 300px, 0 300px, 0px 450px, 75px 450px, 75px 600px, 0px 600px);  shape-outside: polygon(0px 150px, 75px 150px, 75px 300px, 0 300px, 0px 450px, 75px 450px, 75px 600px, 0px 600px);}

<div class="wrapper">  <div></div><div></div><div></div><div></div><div></div>  <div></div><div></div><div></div><div></div><div></div>  <div></div><div></div><div></div><div></div><div></div>  <div></div><div></div><div></div><div></div><div></div></div>

---

Related Topics