use strict;
my $str = 'CSS @media selector
.CSS Code sample test
@media screen and (min-width:0) and (max-width:640px) {
body.overlap .page-title .wf-wrap {
padding-top: 0!important;
padding-bottom: 4px!important
}
.h3-size {
font: normal 17px / 21px "Roboto",Helvetica,Arial,Verdana,sans-serif!important
}
body.breadcrumbs.breadcrumbs-bg {
margin-top: 0!important
}
.page-title .breadcrumbs,.page-title .breadcrumbs a {
font-size: 11px!important
}
}
@-webkit-keyframes fadeIn {0% { opacity: 0; }100% { opacity: 1; }}
@media screen and (max-width:200px){.sidebar-content {margin-bottom:20px}
.cat-item {padding:7px}
.widget_1 {padding-right:0}
}
/* TEST NESTED @media: */
@media screen and (max-width:200px){.sidebar-content {margin-bottom:20px}
.cat-item {padding:7px}
/* TEST NESTED @media capturing everything, comments too */
@media screen and (max-width:359px){.sidebar-content {margin-bottom:20px}
.cat-item {padding:7px}
.widget_1 {padding-right:0}
}
.widget_1 {padding-right:0}
}
@font-face { font-family: dashicons; src: url("https://emd4.com/"); }
.h3-size {
font-style: normal
}
@media(min-width:768px){.vc_col-sm-1,.vc_col-sm-10,.vc_col-sm-11,.vc_col-sm-12,.vc_col-sm-2,.vc_col-sm-3,.vc_col-sm-4,.vc_col-sm-5,.vc_col-sm-6,.vc_col-sm-7,.vc_col-sm-8,.vc_col-sm-9{float:left}
.vc_col-sm-12{width:100%!important}
.vc_col-sm-11{width:91.66666667%}
.vc_col-sm-10{width:83.33333333%}
.vc_col-sm-9{width:75%}
.vc_col-sm-8{width:66.66666667%}
.vc_col-sm-7{width:58.33333333%}
.vc_col-sm-6{width:50%}
.vc_col-sm-5{width:41.66666667%}
.vc_col-sm-4{width:33.33333333%}
.vc_col-sm-3{width:25%}
.vc_col-sm-2{width:16.66666667%}
.vc_col-sm-1{width:8.33333333%}
.vc_col-sm-pull-12{right:100%}
.vc_col-sm-pull-11{right:91.66666667%}
.vc_col-sm-pull-10{right:83.33333333%}
.vc_col-sm-pull-9{right:75%}
.vc_col-sm-pull-8{right:66.66666667%}
.vc_col-sm-pull-7{right:58.33333333%}
.vc_col-sm-pull-6{right:50%}
.vc_col-sm-pull-5{right:41.66666667%}
.vc_col-sm-pull-4{right:33.33333333%}
.vc_col-sm-pull-3{right:25%}
.vc_col-sm-pull-2{right:16.66666667%}
.vc_col-sm-pull-1{right:8.33333333%}
.vc_col-sm-pull-0{right:auto}
.vc_col-sm-push-12{left:100%}
.vc_col-sm-push-11{left:91.66666667%}
.vc_col-sm-push-10{left:83.33333333%}
.vc_col-sm-push-9{left:75%}
.vc_col-sm-push-8{left:66.66666667%}
.vc_col-sm-push-7{left:58.33333333%}
.vc_col-sm-push-6{left:50%}
.vc_col-sm-push-5{left:41.66666667%}
.vc_col-sm-push-4{left:33.33333333%}
.vc_col-sm-push-3{left:25%}
.vc_col-sm-push-2{left:16.66666667%}
.vc_col-sm-push-1{left:8.33333333%}
.vc_col-sm-push-0{left:auto}
.vc_col-sm-offset-12{margin-left:100%}
.vc_col-sm-offset-11{margin-left:91.66666667%}
.vc_col-sm-offset-10{margin-left:83.33333333%}
.vc_col-sm-offset-9{margin-left:75%}
.vc_col-sm-offset-8{margin-left:66.66666667%}
.vc_col-sm-offset-7{margin-left:58.33333333%}
.vc_col-sm-offset-6{margin-left:50%}
.vc_col-sm-offset-5{margin-left:41.66666667%}
.vc_col-sm-offset-4{margin-left:33.33333333%}
.vc_col-sm-offset-3{margin-left:25%}
.vc_col-sm-offset-2{margin-left:16.66666667%}
.vc_col-sm-offset-1{margin-left:8.33333333%}
.vc_col-sm-offset-0{margin-left:0}}';
my $regex = qr/(@.*?:[^}{@]+(\{(?:[^}{]+|\{(?:[^}{]+|\{[^}{]*\})*\})*\}))/p;
if ( $str =~ /$regex/g ) {
print "Whole match is ${^MATCH} and its start/end positions can be obtained via \$-[0] and \$+[0]\n";
# print "Capture Group 1 is $1 and its start/end positions can be obtained via \$-[1] and \$+[1]\n";
# print "Capture Group 2 is $2 ... and so on\n";
}
# ${^POSTMATCH} and ${^PREMATCH} are also available with the use of '/p'
# Named capture groups can be called via $+{name}
Please keep in mind that these code samples are automatically generated and are not guaranteed to work. If you find any syntax errors, feel free to submit a bug report. For a full regex reference for Perl, please visit: http://perldoc.perl.org/perlre.html